d3.js adding click action to a force layout circle?

Question

I am working on to create a undirected graph with force layout. In addition, I try to chage each circle's (node's) color with click event. Is there any idea to add such event on the circle elements. I tyry this code however it is not working.

vis.selectAll("circle.node").on("click", function(d){
    vis.select(d).attr(r, 25)
    .style("fill","lightcoral")
    .style("stroke","red");
});

Solution 1

select(d) references the data, not the element. You need to select(this)

 vis.selectAll("circle.node").on("click", function(){
            d3.select(this).attr('r', 25)
                .style("fill","lightcoral")
                .style("stroke","red");
        });

Solution 2

vis.select(this) gives me a DOM exception. d3.select(this) works for me. You can also use d3.event.target to access the DOM element that is clicked on.