javascript - 在 D3.js 中预先计算和设置节点的初始位置

Question

我正在尝试使用 igraph 预先计算稳定力定向图的位置，并将它们传递到我的 d3.js 图中。这是由于我将使用的数据集的大小，这意味着如果在客户端完成全部力计算，我不能依赖客户端不卡住。我有 JSON 格式的位置，并使用了线性标度以使它们在 d3.js 中有用。

var positions = 
{"positions": [{"x":"-68.824367374", "y": "-6.10824525755"},
{"x":"-80.8080803911", "y": "-3.38997541264"},
{"x":"6.75334817585", "y": "-49.6040729697"},
{"x":"14.6608797291", "y": "-81.8897019921"},
....
var force = d3.layout.force()
                .charge(-100)
                .linkDistance(3)
                .size([width, height])
                .nodes(data.nodes)
                .links(data.links)
                .start();

var posX = d3.scale.linear()
                .range([0,960])
                .domain([-125,120]);

var posY = d3.scale.linear()
                .range([0,500])
                .domain([-125,125]);

这就是我尝试过的方式。我已经尝试过 px 和 py 但结果是一样的。就好像这段代码从未运行过一样。如果我在下面看到的地方输入 console.log，则不会打印该值。这与我将这段代码放在哪里无关，无论是在开始强制之前还是之后。

force.on("start", function() {
                    node
                    .data(positions.positions)
                    .attr("cx", function(d) {
                            console.log(posX(d.x));
                            return posX(d.x);
                        })
                        .attr("cy", function(d) {
                            return posY(d.y);
                        })
                });

为什么启动事件没有设置我的节点的初始位置？它们似乎仍然是随机初始化的。或者，预先计算 d3.js 力定向图的稳定状态的好方法是什么？我曾考虑过在 Phantomjs 上执行此操作，但放弃了。

感谢您花时间阅读我的问题!

编辑

这是一个简单的例子:https://jsfiddle.net/xp0zgqes/ 如果您运行它几次并注意节点的起始位置，您可以看到它们是随机初始化的。

Answer 1

我真的不喜欢回答我自己的问题，但我认为这真的很有用。首先，(这可能仅在我的情况下是特定的)如果初始位置数据来自与节点/链接数据不同的数据对象，那么如果您只是组合它(或者您可以比我聪明，只需创建具有 x 和 y 位置的原始 json 对象)。就我而言:

for (var i = 0; i < data.nodes.length; i++){
                    data.nodes[i].x = posX(positions.positions[i].x);
                    data.nodes[i].y = posY(positions.positions[i].y);
                    data.nodes[i].newAttribute = value;
                }

感谢 JSON 的魔力，可以很容易地向数据添加新属性，例如如果您希望固定节点。

问题似乎与 force.start() 调用有关。如果像这样初始化力时调用:

var force = d3.layout.force()
                .charge(-100)
                .linkDistance(3)
                .size([width, height])
                .nodes(data.nodes)
                .links(data.links)
                .start();

布局默认会随机初始化节点。我发现解决这个问题的方法是添加一个 on tick 事件并稍后启动强制。

var force = d3.layout.force()
                    .charge(-100)
                    .linkDistance(3)
                    .size([width, height])
                    .nodes(data.nodes)
                    .links(data.links)
                    .on("tick", tick);

                    force.start(); //Note, not chained


//Standard code that goes in the on.tick event
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("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

瞧!我们现在有一个功能齐全的力导向图，其初始位置从 json 设置。

工作 fiddle :https://jsfiddle.net/zbxbzmen/