Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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");
});
like image 374
erogol Avatar asked Jan 31 '12 14:01

erogol


2 Answers

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");
        });
like image 63
methodofaction Avatar answered Nov 09 '22 15:11

methodofaction


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.

like image 2
Lars Kotthoff Avatar answered Nov 09 '22 17:11

Lars Kotthoff