如何在 D3 中控制力导向图的“弹跳入口”?

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输入链接说明

感谢您提供的任何帮助!


你曾经找到这个问题的答案吗?我也遇到了同样的问题。 - Braden
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; });

所有这些选项似乎都非常不确定,如果链接/关系的数量从一个渲染到另一个发生变化,则无法保证其有效。我将遇到可视化没有链接的情况,也会有其他极端情况,有数千个链接(全部来自一个中心/焦点节点)。您有什么想法可以确保每个极端和中间状态的图形稳定性保持一致吗?谢谢。 - Information Technology

2

我也一直在思考这个问题,以下是我的解决方案。我使用nodejs离线运行强制布局,然后将生成的节点数据保存到json文件中。我将其用作新的json文件进行布局。说实话,我不确定它是否更有效。如果您有任何解决方案,请告诉我。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接