如何控制D3中的Force Directed Graph的反弹条目？

问题描述

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

I've been able to build a Force Directed Graph using a Force Layout. Most features work great but the one big issue I'm having is that, on starting the layout, it bounces all over the page (in and out of the canvas boundary) before settling to its location on the canvas.

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

I've tried using alpha to control it but it doesn't seem to work:

    // 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画布吗？

Does anyone know how to properly control the entry of a Force Layout into its SVG canvas?

我不介意图表浮动和缓慢稳定，但整个图表的疯狂反弹是不吸引人的。

I wouldn't mind the graph floating in and settling slowly but the insane bounce of the entire graph isn't appealing, at all.

BTW，示例可以在以下位置找到：

BTW, the Force Directed Graph example can be found at: http://bl.ocks.org/Guerino1/2879486enter link description here

感谢您提供任何帮助！

推荐答案

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

The nodes are initialized with a random position. From the documentation: "If you do not initialize the positions manually, the force layout will initialize them randomly, resulting in somewhat unpredictable behavior." You can see it in the source code:

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

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

They will be inside the canvas boundary, but they can be pushed outside by the force. You have many solutions:

1. 节点可以在画布中进行约束：


2. 尝试更多的充能力和更短的链接，或更多的摩擦，因此节点往往反弹更少


3. 您可以运行模拟而不对节点进行动画处理，只显示最终结果


4. 您可以初始化节点位置（但如果你把它们都放在中心，排斥将是巨大的，图表会爆炸更多）：

1. The nodes can be constrained inside the canvas: http://bl.ocks.org/mbostock/1129492
2. Try more charge strength and shorter links, or more friction, so the nodes will tend to bounce less
3. You can run the simulation without animating the nodes, only showing the end result http://bl.ocks.org/mbostock/1667139
4. You can initialize the nodes position https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes (but if you place them all on the center, the repulsion will be huge and the graph will explode still more):

。

var n = nodes.length; nodes.forEach(function(d, i) {
    d.x = d.y = width / n * i; });

这篇关于如何控制D3中的Force Directed Graph的反弹条目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！