如何使用 d3 画布渲染器添加鼠标事件以强制定向图？

所有其他示例都有带有 svg.append() 的鼠标事件......我不知道在哪里“输入”以获取画布渲染器中的弧并添加.on('click', function(){})v4 风格。我想点击获取值d。在此示例中，我应该在哪里添加处理程序？我理解这个例子下面的旧方法。

这样的东西可能有效吗？d3.select(canvas).call(d3.mouse()).on("click", ...)

link to 工作示例 http://bl.ocks.org/mbostock/95aa92e2f4e8345aaa55a4a94d41ce37

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);
}

old way

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));

在 D3 v4.x 中，添加点击事件的方式与在 v3.x 中的方式几乎相同：

selection.on("click", function(d){
    //do whatever you want with the datum
});

您问题中的问题不是 v3 与 v4，这不是您共享的代码中的问题。该代码的问题在于它使用了 HTMLcanvas，而不是 SVG，来渲染数据可视化。

与 SVG 不同，canvas 没有元素的节点树。您不能“选择某些内容”并向其添加事件处理程序。

将画布视为光栅图像，如 BMP 或 JPEG。您可以找到您单击的 x 和 y 位置，您甚至可以找到该像素的颜色，但您无法选择给定的节点元素，因为画布没有。

例如，检查这个纳迪·布雷默 (Nadieh Bremer) 的教程 http://www.visualcinnamon.com/2015/11/learnings-from-a-d3-js-addict-on-starting-with-canvas.html看看使用 HTML canvas 时获取用户点击的圆圈有多复杂。