CODEWITHSUNDEEP
javascriptsvgd3.jsnodesforce-layout
nocodaoh.2013
nocodaoh.2013

Reputation: 171

Adding OnClick event to D3 force layout graph

I am trying to add an OnClick event to the nodes of my force layout graph but when I try to click on them, nothing happens. I believe that it is because I am not using an svg element and the .on("click", click) only works with svg elements I think but I am not entirely sure. Here is the code that I am trying to implement:

var node = svg.selectAll(".node")
.data(nodes)
  .enter().append("circle")
.attr("r",function(d) {return d.size})
  .style("fill",function(d) {return color(d.type);})
.on("click", click)
  .call(force.drag);

  node.append("title")
  .text(function(d){return d.name;});

  force.on("tick", function(){
  node.attr("cx", function(d){return d.x;})
    .attr("cy", function(d) {return d.y;});

  link.attr("x1", function(d){return d.source.x;})
    .attr("y1", function(d){return d.source.y;})
    .attr("x2", function(d){return d.target.x;})
    .attr("y2", function(d) {return d.target.y;});
});


function click() {
   d3.select(this).select("circle").transition()
     .duration(750)
     .attr("r", 30)
     .style("fill", "lightsteelblue");
      }

When I try and click on a node, nothing happens. I am not sure what to do. I think the problem has to do with the:

.enter().append("circle")

I think it needs to be an svg element like ("g") or ("svg") but I couldn't figure that out. Any advice or suggestions would be appreciated. Thanks!

Upvotes: 2

Views: 4207

Answers (1)

mdml
mdml

Reputation: 22882

You have an extra .select("circle") in click(). Instead, it should start with just:

function click(){
    d3.select(this).transition()...
}

Upvotes: 2

Related Questions