【 D3.js 进阶系列 — 2.2 】 力学图的參数
JS 系列 进阶 2.2 D3 參数
2023-09-27 14:23:30 时间
力学图的布局中有非常多參数。本文将逐个说明。
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 。转载请注明出处。谢谢
相关文章
- js小功能
- 图片轮播(左右切换)--JS原生和jQuery实现
- JS Hook 攻防案例
- 温故js系列(16)-数组&数组方法使用详解
- vue.js ES6对象字面量的增强写法
- Node.js 15 正式版发布
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐
- js深入研究之神奇的匿名函数类生成方式
- Vue.js学习笔记(一)
- js系列之js简介
- 【甄选靶场】Vulnhub百个项目渗透——项目二十五:temple-of-DOOM-v1(node.js反序列化,二进制文件提权)
- js--判断资源是否存在
- JS组件系列——自己动手扩展BootstrapTable的treegrid功能
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
- JS组件系列——使用HTML标签的data属性初始化JS组件
- JS组件系列——封装自己的JS组件,你也可以
- JS组件系列——Bootstrap Select2组件使用小结
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- JS组件系列——JsPlumb流程图及相关效果详解(二:附源码)
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- js动画(三)
- 《React-Native系列》23、 js实现下拉刷新效果(Android和iOS通用)
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
- node.js系列