title: how to add mouse events to force directed graph using the d3 canvas renderer?
body: <p>All the other examples have mouse events with svg.append().... I don't know where to "enter" to get the arcs in a canvas renderer and add <code>.on('click', function(){})</code> in v4 style. I want to click to get the value of <code>d</code>. Where do I add the handler in this example? I understand the old way below this example. </p>
  
  <p>Might something like this work? <code>d3.select(canvas).call(d3.mouse()).on("click", ...)</code></p>
  
  <p>link to <a href="http://bl.ocks.org/mbostock/95aa92e2f4e8345aaa55a4a94d41ce37" rel="nofollow noreferrer">working example</a></p>
  
  <pre><code>var links = d3.range(nodes.length - 1).map(function(i) {
    return {
      source: Math.floor(Math.sqrt(i)),
      target: i + 1
    };
  });
  
  var simulation = d3.forceSimulation(nodes)
      .force("charge", d3.forceManyBody())
      .force("link", d3.forceLink(links).distance(20).strength(1))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .on("tick", ticked);
  
  var canvas = document.querySelector("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width,
      height = canvas.height;
  
  d3.select(canvas)
      .call(d3.drag()
          .container(canvas)
          .subject(dragsubject)
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  
  function ticked() {
    context.clearRect(0, 0, width, height);
    context.save();
    context.translate(width / 2, height / 2);
  
    context.beginPath();
    links.forEach(drawLink);
    context.strokeStyle = "#aaa";
    context.stroke();
  
    context.beginPath();
    nodes.forEach(drawNode);
    context.fill();
    context.strokeStyle = "#fff";
    context.stroke();
  
    context.restore();
  }
  
  function dragsubject() {
    return simulation.find(d3.event.x - width / 2, d3.event.y - height / 2);
  }
  
  function dragstarted() {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d3.event.subject.fx = d3.event.subject.x;
    d3.event.subject.fy = d3.event.subject.y;
  }
  
  function dragged() {
    d3.event.subject.fx = d3.event.x;
    d3.event.subject.fy = d3.event.y;
  }
  
  function dragended() {
    if (!d3.event.active) simulation.alphaTarget(0);
    d3.event.subject.fx = null;
    d3.event.subject.fy = null;
  }
  
  function drawLink(d) {
    context.moveTo(d.source.x, d.source.y);
    context.lineTo(d.target.x, d.target.y);
  }
  
  function drawNode(d) {
    context.moveTo(d.x + 3, d.y);
    context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
  }
  </code></pre>
  
  <p><strong>old way</strong></p>
  
  <pre><code>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));
  </code></pre>