Question

我在youtube上看到一个关于Mike Bostock视频的例子，他用一个用鼠标光标移动的节点击退了节点。

我试图复制这个并将一些适用于所有5s的东西放在它开始挣扎之前然后完全停止。 JSfiddle - http://jsfiddle.net/hiwilson1/p6hxop7m/。任何人都能解释为什么在这么短的时间后停止了这个问题吗？

function moveNode() {
    var m = d3.mouse(this);

    force.nodes()[0].x = m[0];
    force.nodes()[0].y = m[1];
}

function tick() {
    svg.selectAll(".node")
        .attr("cx", function(d, i) { if (i != 0) return d.x})
        .attr("cy", function(d, i) { if (i != 0) return d.y})
}

我最好的猜测是这个问题与tick事件和mousemove事件有关，它们正在努力并且同时运行，尽管我还有两个和谐地工作的例子。

任何帮助表示感谢。

UPDATE：在moveNode（）的末尾添加force.start（），直接在手动影响force.nodes（）[0]坐标后修复它。任何人都可以向我解释实际上是做什么的吗？

Answer 1

从D3 documentation（我的重点）：

force.start（）

开始模拟;在分配节点和链接之后，必须在首次创建布局时调用此方法。 此外，只要节点或链接发生变化，就应该再次调用它。

您未在start()函数中调用tick，因此动画只是优雅地结束。只需将force.start()添加到tick()的末尾，它就可以正常工作。

(updated jsfiddle here)

Answer 2

添加

force.resume();

在moveNode函数的末尾。

这会继续你提供的jsfiddle中的'动画'。

但我无法解释为什么，除此之外，这里的示例是如何完成的：http://mbostock.github.io/d3/talk/20111018/collision.html

d3单节点移动，光标排斥其他节点

2 个答案:

force.start（）