javascript - 在 D3 力导向布局中，如何在不拖动的情况下以编程方式定位固定节点？

Question

在对 this question 的回答中, mbostock 指出“如果一个节点是固定的，它只能通过拖动而不是通过模拟来移动。”

但是，如果我想以编程方式定位节点怎么办，也许是通过设置 d.x 和 d.y 值？到目前为止，我的尝试都失败了。我已经尝试了 d.x 和 d.y 的明显设置，但对于固定节点，这些值将被忽略。我还尝试过暂时“取消修复”、重绘，然后“重新修复”节点，但这也不起作用——节点会在下一次更新时神奇地重置到它们的原始位置。

这是一个 running example后一种方法。

这是代码的关键部分，在点击时执行:

function explicitlyPosition() {
  node.each(function(d) {
    d.x = 0;
    d.y = 0;
    d.fixed = false;
  });
  tick();
  node.each(function(d) {
    d.fixed = true;
  });
  force.resume();
}

有没有办法使用我尝试过的方法或类似的方法来做到这一点？或者我可以在 D3 中使用完全不同的图形布局，但理想情况下我希望我的图形的大部分以力导向的方式进行布局。

谢谢!

Answer 1

当您触发 tick 时，节点的先前位置用于确定新位置，并存储在 px 和 py 中属性。如果您更改这些属性，运行 tick 会将 x 和 y 属性更新为这些值。

Fiddle.

本质上，当您重绘时，您的节点会神奇地修复到新值，而不是神奇地修复到它们的旧值。