d3.js - 如何控制 D3 中力有向图的反弹入口？

Question

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

我试过使用 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 Canvas ？

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

顺便说一句， 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;

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

节点可以限制在 Canvas 内: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; });