title: Node click event not firing for D3 Force Directed Graph
body: <p>I'm trying to make nodes collapsed on click of node itself. The graph at present is force directed graph with draggable nodes.</p>
  
  <p>Problem I'm facing is, after attaching the node click event I cannot get the click to fire instead node is displaced from it's position (like dragged on mouse click).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
  
  var color = d3.scaleOrdinal(d3.schemeCategory20);
  
  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));
  
  var graph = { "links" : [ { "relation" : "Relation 0",
          "source" : 0,
          "target" : 1
        },
        { "relation" : "Relation 1",
          "source" : 1,
          "target" : 3
        },
        { "relation" : "Relation 3",
          "source" : 1,
          "target" : 4
        },
        { "relation" : "Relation 4",
          "source" : 1,
          "target" : 5
        },
        { "relation" : "Relation 5",
          "source" : 0,
          "target" : 2
        },
        { "relation" : "Relation 6",
          "source" : 2,
          "target" : 6
        }
      ],
    "nodes" : [ { "collapsed" : false,
          "collapsing" : 0,
          "id" : 0,
          "name" : "Node 0"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 1,
          "name" : "Node 1"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 2,
          "name" : "Node 2"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 3,
          "name" : "Node 3"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 4,
          "name" : "Node 4"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 5,
          "name" : "Node 5"
        },
        { "collapsed" : false,
          "collapsing" : 0,
          "id" : 6,
          "name" : "Node 6"
        }
      ]
  };
  var edges = [];
  graph.links.forEach(function(e) {
    var sourceNode = graph.nodes.filter(function(n) {
      return n.id === e.source;
    })[0],
        targetNode = graph.nodes.filter(function(n) {
          return n.id === e.target;
        })[0];
  
    edges.push({
      source: sourceNode,
      target: targetNode,
      relation: e.relation
    });
  });
  
  update();
  
  function update() {
    var link = svg.append("g")
        .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
        .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
  
    var node = svg.append("g")
        .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
        .attr("r", 8)
        .attr("fill", function(d) { return color(d.group); })
        .on("click", togglenode)
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
  
    node.append("title")
        .text(function(d) { return d.id; });
  
    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);
  
    simulation.force("link")
        .links(graph.links);
  
    function ticked() {
      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; });
  
      node
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    }
  }
  
  function dragstarted(d) {
    console.log('drag started');
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    console.log('dragged');
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    console.log('drag ended');
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  function togglenode(d) {
    console.log('clicked node : '+d.id);
    if (!d3.event.defaultPrevented) {
      var inc = d.collapsed ? -1 : 1;
      recurse(d);
  
      function recurse(sourceNode){
        //check if link is from this node, and if so, collapse
        edges.forEach(function(l) {
          if (l.source.id === sourceNode.id){
            l.target.collapsing += inc;
            recurse(l.target);
          }
        });
      }
  
      d.collapsed = !d.collapsed;
  
      update();
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }
  
  .nodes circle {
    stroke: #fff;
    stroke-width: 4.5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.js"&gt;&lt;/script&gt;
  
  &lt;svg width="800" height="500"&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>