javascript - 在 d3 强制定向布局中拖动多个节点

Question

前提条件:d3强制定向布局；一些节点是通过一个接一个的顺序点击来选择的(视觉上它们变大并在代码中被推送到数组)

有没有办法像 Windows 资源管理器中的文件一样，用鼠标选择一个来拖动它们？

附言我在 stackoverflow 上得到了很多答案，而没有问很长时间。这是我的第一个问题。在此先感谢您的帮助!

Answer 1

我实现拖动多个节点(基于子节点)的方法是在我的 tick 函数中使用一个变量记录被拖动节点的位移，该变量的范围允许该值在下一次 tick 运行时仍然存在。

您将需要一个对象，其中键是被拖动节点的唯一标识符，值是在拖动键节点时要平移/拖动的节点的 d3 选择。

dragObject就是上面提到的对象。

nodeData 是您拖动的主要节点的 d3 数据 - ( d3.select(node uid).datum() )。

offset.x 和 offset.y 构成了上次运行 tick 时定义的上述变量。

var translateAllChildren = function (nodeData) {
    if (dragObject[nodeData.uid]) {
        dragObject[nodeData.uid]
            .attr("transform", function(d) {

                d.x = (d.x + offset.x);;
                d.y = (d.y + offset.y);

                return "translate(" + d.x + "," + d.y + ")";
            });
    }
}