7

我已经能够使用力布局构建一个力有向图。大多数功能都很好用，但我遇到的一个大问题是，在开始布局时，它会在整个页面（进出画布边界）反弹，然后再定位到画布上的位置。

我尝试使用 alpha 来控制它，但它似乎不起作用：

    // Create a force layout and bind Nodes and Links
    var force = d3.layout.force()
        .charge(-1000)
        .nodes(nodeSet)
        .links(linkSet)
        .size([width/8, height/10])
        .linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) // Controls edge length
        .on("tick", tick)
        .alpha(-5) // <---------------- HERE
        .start();

有谁知道如何正确控制强制布局进入其 SVG 画布？

我不介意图表漂浮并缓慢稳定，但整个图表的疯狂反弹根本不吸引人。

顺便说一句，力有向图示例可以在以下位置找到：http ://bl.ocks.org/Guerino1/2879486在此处输入链接描述

谢谢你尽你所能的帮助！

4

2 回答 2

5

节点用随机位置初始化。来自文档：“如果您不手动初始化位置，强制布局将随机初始化它们，从而导致一些不可预测的行为。” 您可以在源代码中看到它：

// initialize node position based on first neighbor
function position(dimension, size) {
    ...
    return Math.random() * size;

它们将在画布边界内，但它们可以被力推到外面。你有很多解决方案：

  1. 节点可以限制在画布内：http: //bl.ocks.org/mbostock/1129492
  2. 尝试更多的充电强度和更短的链接，或者更多的摩擦，这样节点的反弹就会更少
  3. 您可以在不为节点设置动画的情况下运行模拟，只显示最终结果http://bl.ocks.org/mbostock/1667139
  4. 你可以初始化节点位置https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes（但是如果你把它们都放在中心，排斥会很大，图形会爆炸更多):

.

var n = nodes.length; nodes.forEach(function(d, i) {
    d.x = d.y = width / n * i; });
于 2013-06-24T01:43:33.763 回答
2

我也一直在考虑这个问题，这就是我想出的解决方案。我使用 nodejs 离线运行强制布局刻度并将生成的节点数据保存到 json 文件中。我用它作为布局的新 json 文件。我不太确定说实话会更好。我想听听您找到的任何解决方案。

于 2013-06-23T18:01:42.427 回答