如何检测 d3.js 力导向图中的元素拖动

Question

我在 d3.js 中有一个力导向图（太棒了：对 MB 和所有参与者的巨大荣誉！）。我想以某种方式能够检测到 return 当前正在拖动的任何节点的索引。

我知道我可以重新定义 d3.behavior.drag() 以将回调附加到拖动事件，但我想要本机 force.drag 的所有行为并且将其全部重复似乎很笨拙添加一点点。以我的经验不足，也许我忽略了一些直接的方法来做到这一点？

嗯，是的，我应该更明确。这就是我的尝试：我使用 here 示例作为我的模型，对其进行修改以适合我的目的，并边学习边学习 d3.js。我这样定义节点：

var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("class", "node")
    .attr("r", 6)
    .on("click", clicked)
    .on("dblclick", dblclick)
    .on("contextmenu", cmdclick)
    .on("drag", draghandler)
    .call(force.drag);

function draghandler(d){
    console.log(d);
    console.log(this);
}

我的 click、dblclick 和 contextmenu 事件处理程序完全按照我的预期工作；但是，当我尝试为 drag 添加事件处理程序时，它永远不会执行。我想象它失败是因为我用错了它，或者在错误的地方，或者因为行为是由 force.drag 控制的，我必须重新定义它以添加我想要的额外行为。

Answer 1

drag 事件不是由 circle 触发的，它是由拖动行为 (source) 触发的，调用 force.drag 将 return行为，你可以在那里设置一个监听器：

force.drag()
  .on("dragstart", function () {
    console.log(arguments);
  })

Demo，查看控制台的输出

更新：

我 fork 了你发布的示例 link，它没有使用 d3.json，它工作正常：demo

如何检测 d3.js 力导向图中的元素拖动

how to detect element drag in d3.js force directed graph

javascript

svg

d3.js