如何控制 D3 中力有向图的反弹条目？答案

【问题标题】：How do I control the bounce entry of a Force Directed Graph in D3?如何控制 D3 中力有向图的反弹条目？
【发布时间】：2013-06-20 02:54:40
【问题描述】：

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

我尝试使用 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 画布吗？

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

顺便说一句，Force Directed Graph 示例可以在以下位置找到：http://bl.ocks.org/Guerino1/2879486 enter link description here

感谢您提供的任何帮助！

【问题讨论】：

你找到这个问题的答案了吗？我也有同样的问题。

标签： d3.js data-visualization force-layout graph-visualization

【解决方案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; });

【讨论】：

如果链接/关系的数量从任何一个渲染更改为另一个渲染，所有这些选项似乎都非常不确定并且不能保证有效。我会遇到可视化具有零链接的情况，并且会有数千个链接的其他极端情况（全部来自一个中心/焦点节点）。关于如何确保每个极端以及介于两者之间的所有内容的一致图形稳定性有什么想法吗？谢谢。

【解决方案2】：

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

【讨论】：