如何检测d3.js强制有向图中的元素拖动

时间:2015-04-12 18:09:06

标签: javascript svg d3.js

我在d3.js中有一个强制导向图(非常棒:对MB和所有参与者都有很大的赞誉!)。我想以某种方式能够检测并返回当前被拖动的任何节点的索引。

我知道我可以重新定义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);
}

clickdblclickcontextmenu的事件处理程序正如我预期的那样工作;但是,当我尝试为drag添加事件处理程序时,它永远不会执行。我想它失败了,因为我错误地使用它,或者错误地使用它,或者因为行为是由force.drag控制的,所以我必须重新定义它以添加我想要的其他行为。

1 个答案:

答案 0 :(得分:2)

drag事件未被circle触发,它被拖动行为(source)触发,调用force.drag将返回该行为,你可以在那里设置一个监听器:

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

Demo,请参阅控制台的输出

更新

我分发了您发布的示例链接,该链接没有使用d3.json且工作正常:demo