在 D3 强制导向布局中，如何以编程方式定位固定节点，而无需拖动？答案

【问题标题】：In D3 force-directed layout, how can I position fixed nodes programmatically, without dragging?在 D3 强制导向布局中，如何以编程方式定位固定节点，而无需拖动？
【发布时间】：2014-08-12 17:42:17
【问题描述】：

在对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 中使用完全不同的图形布局，但理想情况下我希望图形的大部分以力导向的方式布局。

谢谢！

【问题讨论】：

如果我理解您要正确执行的操作，您只需将真假换成 fixed。也就是说，当您明确设置.x 和.y 时，fixed 应该为真，否则为假。 jsfiddle.net/2ov2La89/16
手动（重新）设置刻度处理程序中固定节点的位置。

标签： javascript d3.js force-layout

【解决方案1】：

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

Fiddle.

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

【讨论】：

不错！就是这样。事实上，这甚至在节点固定的情况下也有效，因此也可以避免所有与 un-fixing 和 fix 相关的问题。这是另一个简化版：jsfiddle.net/2ov2La89/29

【解决方案2】：

2014 年回答中使用的 jsfiddles 和这个问题的 cmets 对于 D3 版本 4 来说已经过时了。在版本 4 中，制作固定节点的过程大大简化了。您可以简单地为要修复的每个节点设置 fx 和 fy 值。

例如，像这样：

var graph = {
    "nodes": [
        // unfixed
        {"id":0},
        // fixed
        {"id":1, "fx": 200, "fy": 200},
        {"id":2, "fx": 200, "fy": 300},
        {"id":3, "fx": 300, "fy": 250}
    ],
    "links": [
        {"source": 0, "target": 1},
        {"source": 0, "target": 2},
        {"source": 1, "target": 3},
        {"source": 2, "target": 3}
    ]
};

或者这个：

graph.nodes[3].fx = 500;
graph.nodes[3].fy = 250;

或者这个：

graph.nodes.each(function(d) {
    if(d.id == 2) {
        d.fx = 0;
        d.fy = 0;       
    }
});

【讨论】：