Question

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

我尝试使用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();

有谁知道如何正确控制Force Layout在其SVG画布中的输入？

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

BTW，Force Directed Graph示例位于：http://bl.ocks.org/Guerino1/2879486 enter link description here

感谢您提供的任何帮助！

Answer 1

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

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

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

可以在画布内约束节点：http://bl.ocks.org/mbostock/1129492
尝试更多的充电强度和更短的链接，或更多的摩擦，因此节点往往会反弹更少
您可以在不动画节点的情况下运行模拟，仅显示最终结果http://bl.ocks.org/mbostock/1667139
您可以初始化节点位置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; });

Answer 2

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

如何在D3中控制强制定向图的反弹条目？

2 个答案: