预先计算并设置 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);
                        })
                });

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

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

编辑

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

Answer 1

真的不喜欢回答我自己的问题，但我认为这将非常有用。首先，（这可能仅在我的情况下是特定的）如果初始位置数据来自与 node/link 数据不同的数据对象，那么如果您只是将它结合起来（或你可以比我聪明，只需创建具有 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/

预先计算并设置 D3.js 中节点的初始位置

Precalculate and set initial positions of nodes in D3.js

javascript

igraph

d3.js

force-layout