javascript - d3.drag 几秒钟后停止

Question

今天的问题是关于d3.drag()函数的。我不太理解 simulation.alpha 值。

我面临以下问题:我想拖动我的节点。这是代码的一小部分:

var node = d3.select("svg").selectAll("circle")
             .data(nodes).enter().append("circle")
             .call(d3.drag().on("start", dragstart)
                            .on("drag", dragged)
                            .on("end", dragend));

function dragstart(d){
    //If i delete the following line, my simulation stops after some time.
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
};

就像我在评论中所说，如果我不重新启动 alphaTarget，拖动会在几秒钟后停止。有人能解释一下这个现象吗？

这是我完整的 JSFiddle:https://jsfiddle.net/FFoDWindow/zwtzq8rj/2/

Answer 1

一小时前遇到同样的问题。

可能你的渲染逻辑在tick函数中。如果您希望能够在不重新启动模拟的情况下拖动元素，您应该实现渲染函数(它告诉元素根据数据的 x 和 y 设置其位置)。然后将渲染函数调用添加到“拖动”函数中

function dragged(d) {
    d.x = d3.event.x;
    d.y = d3.event.y;
    render();
}

您还可以将 tick() 函数更改为类似的内容

function tick(){
    render();
}

这不是最有效的方法，但对我有用。

如果您希望在拖动后也开始模拟，那么您的实现是正确的。