【 D3.js 进阶系列 — 2.2 】 力学图的参数

力学图的布局中有很多参数，本文将逐个说明。

D3 中的力学图布局是使用韦尔莱积分法计算的，这是一种用于求解牛顿运动方程的数值方法，被广泛应用于分子动力学模拟以及视频游戏中。定义布局的代码如下：

var force = d3.layout.force()
           

即可，D3 中提供了 17 个函数用于设定其参数和事件，在所有布局中是最多的，下面将对其进行说明。

size()

用于设定力学图的作用范围，使用方法为 force.size( [ x , y ] )，这个函数用于指定两件事：

• 重力的重心位置为 ( x/2 , y/2 )
• 所有节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间（但并非之后也是如此）

如果不指定，默认为 [ 1 , 1 ] 。

linkDistance()

指定结点连接线的距离，默认为20。如果距离是一个常数，那么各连接线的长度总是固定的；如果是一个函数，那么这个函数是作用于各连接线（ source , target ）的。

linkStrength()

指定连接线的坚硬度，值的范围为[ 0 , 1 ]，值越大越坚硬。其直观感受是：

• 值为1，则拖动一个顶点A，与之相连的顶点会与A保持linkDistance设定的距离运动
• 值为0，则拖动一个顶点A，与之相连的顶点不会运动，连接线会被拉长

friction()

定义摩擦系数的函数，值的范围为[ 0 , 1 ]，默认为0.9。但是这个值其实并非物理意义上的摩擦，其实其意义更接近速度随时间产生的损耗，这个损耗是针对每一个顶点的。

• 值为1，则没有速度的损耗。
• 值为0，则速度的损耗最大。

charge()

设定引力，是排斥还是吸引，默认值为-30。

• 值为+，则相互吸引，绝对值越大吸引力越大。
• 值为-，则相互排斥，绝对值越大排斥力越大。

chargeDistance()

设定引力的作用距离，超过这个距离，则没有引力的作用。默认值为无穷大。

gravity()

以 size 函数设定的中心产生重力，各顶点都会向中心运动，默认值为0.1。也可以设定为0，则没有重力的作用。

theta()

顶点数如果过多，计算的时间就会加大（O(n log n)）。theta 就是为了限制这个计算而存在的，默认值为0.8。这个值越小，就能把计算限制得越紧。

alpha()

设定动画运动的时间，超过时间后运动就会停止。其实

• force.start() 即 alpha(0.1)
• force.stop() 即 alpha(0)

谢谢阅读。

文档信息

• 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
• 发表日期：2014 年 11 月 15 日
• 更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
• 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢