title: Adding OnClick event to D3 force layout graph
body: <p>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:</p>
  
  <pre><code>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");
        }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.enter().append("circle")
  </code></pre>
  
  <p>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!</p>