ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
力学图的布局中有很多参数,本文将逐个说明。 D3 中的力学图布局是使用[韦尔莱积分法](http://zh.wikipedia.org/wiki/%E9%9F%A6%E5%B0%94%E8%8E%B1%E7%A7%AF%E5%88%86%E6%B3%95)计算的,这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中。定义布局的代码如下: ~~~ 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 - 数据可视化专题站](http://www.ourd3js.com/) 和 [CSDN个人博客](http://blog.csdn.net/lzhlzz) - 备注:本文发表于 [OUR D3.JS](http://www.ourd3js.com/) ,转载请注明出处,谢谢