javascript - 卡住力定向网络图并在 D3 中可拖动

Question

我正在尝试完全卡住 d3 中的力定向网络!我尝试将摩擦值设置为 0，但网络变得更加密集，节点仍然略微悬停。

var force = d3.layout.force()
.charge(-220)
.linkDistance(70)
.friction(0);

我还希望我的节点可以拖动，即在拖动时移动位置。

最终，我试图获得类似于 Cytoscape js 的东西，它看起来像 this .

谢谢!

Answer 1

首先，如果你想在某个时间“卡住”图形，你可以使用 stop force布局命令:

force.stop()

一个很好的用途是首先让图表自组织(使用 tick )然后停止力:

// include in beginning of script
force.start();
for (var i = 0; i < n; ++i) force.tick();
force.stop();

然后，如果您想拖放节点，一个好主意是在 d3 示例页面上搜索 drag，您会找到以下链接:Drag and Drop Support to set nodes to fixed position when dropped这有你想要的一切。顺便说一句，它也与您可能会感兴趣的一个 stackoverflow 问题有关:D3 force directed graph with drag and drop support to make selected node position fixed when dropped

这里是有趣的拖放代码，适用于力已经停止的图形(我只是评论了一些行，但不确定，所以通过取消注释来验证它是否没有按预期工作)

var node_drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

function dragstart(d, i) {
    //force.stop() // stops the force auto positioning before you start dragging
}

function dragmove(d, i) {
    d.px += d3.event.dx;
    d.py += d3.event.dy;
    d.x += d3.event.dx;
    d.y += d3.event.dy; 
    tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}

function dragend(d, i) {
    //d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
    //tick();
    //force.resume();
}

function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
};