d3.js控制力布局中的初始动画

时间:2013-06-18 10:02:41

标签: animation d3.js force-layout

我已经阅读了很多关于影响力布局的初始动画的内容,但恐怕我还没有理解它。

我已经找到(并且可以实施)this example,关于如何有效地“停止”它。

但我的问题是,是否有可能控制它(即影响“强制停止”所需的时间?)。

从文档中可以看出 alpha 是要更改的参数,但它没有区别(我尝试了负值,零值和正值,没有任何明显的差异)。

这是我想要做的事情的一个方面: yrscc fiddle我正在尝试做什么。

var force = d3.layout.force()
    .nodes(d3.values(datax.nodes))
    .links(datax.links)
    .size([xViewPortArea.Width, xViewPortArea.Height])
    .linkDistance(xGraphParameters.xLinkDistance)
    .charge(xGraphParameters.xCharge)
    .on("tick", tick)
     .alpha(-5)  // HERE 
    .start();

我的问题:

  • alpha的哪个值实际上会影响迭代次数? (我认为它的意思是“*如果值是非正的,并且力布局正在运行,此方法会在下一个刻度上停止强制布局并发送”结束“in the documentation
  • 在这个this posting中,一个函数由@JohnS提出,显然可以提供帮助。但我还没有明白应该把它叫做什么。

P.S:另一个很酷的选择是在屏幕上显示图像,然后在后台like here中计算最佳布局。但我放弃了尝试实施它

1 个答案:

答案 0 :(得分:10)

冷却力布局的一种方法是强制嘀嗒事件:

var k = 0;
while ((force.alpha() > 1e-2) && (k < 150)) {
    force.tick(),
    k = k + 1;
}

alpha值测量力的温度,较低的值表示布局更稳定。要考虑稳定的滴答数将取决于节点的数量,我在50-200时取得了良好的效果。摩擦系数有助于稳定力,但布局不太理想。