javascript - d3js 移动节点而不拖动

Question

我正在使用以下代码在我的 d3.js 图中移动一个节点：

d3.select("#"+ nodeid).attr("x",x);
d3.select("#"+ nodeid).attr("y",y);

这很好用，但是当我再次开始拖动节点时，它会“跳”回原来的位置并从那里开始移动。

有什么想法我在这里做错了吗？

Answer 1

我最终也将其添加到代码中

d3.select("#"+ nodeid).data([{x: x, y: y}]);

Answer 2

您正在更新 DOM 元素（图形），而不是基础数据，并且 dragstart 事件正在使用仍存储在数据中的原始位置。

尝试这样的事情：

force.setNodeCoords = function (id, x, y) {
    var fnodes = force.nodes();
    fnodes[id].x = x;
    fnodes[id].y = y;
    force.nodes(fnodes);
    svg.selectAll("circle.node")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
};

（svg您的 SVG 或其他父 div 在哪里，并且node是您的节点的类）

您可能还想更新行/链接！