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);
                        })
                });

为什么on start事件没有设置我的节点的初始位置？它们似乎仍然是随机初始化的。或者，什么是预先计算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; });
}

和Voilà！我们现在有一个功能强大的力导向图，其初始位置由json设定。

工作小提琴：https://jsfiddle.net/zbxbzmen/

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

1 个答案: