阅读 1562

D3力导向图使用总结

一、simulation各项参数简单介绍

this.simulation = d3
.forceSimulation()
.alphaDecay(0.03) //设置 alpha 衰减率.迭代150,默认0.0228
.alphaMin(0.005) //需要在 [0, 1] 之间。如果没有指定 min 则返回当前的最小 alpha 值,默认为 0.001. 在仿真内部,会不断的减小 alpha 值直到 alpha 值小于 最小 alpha。
.velocityDecay(0.2) //默认为 0.4,较低的衰减系数可以使得迭代次数更多,其布局结果也会更理性,但是可能会引起数值不稳定从而导致震荡。
.force("link",d3.forceLink() //link froce(弹簧模型) 可以根据 link distance 将有关联的两个节点拉近或者推远。力的强度与被链接两个节点的距离成比例,类似弹簧力。
.id(d => d.pk) //设置或获取link中节点的查找方式 
.distance(radius * 5) //设置或获取两个节点之间的距离)//  
.force('charge', d3.forceManyBody())
.force("charge",d3.forceManyBody().strength(-250) //作用力应用在所用的节点之间,当strength为正的时候可以模拟重力,当为负的时候可以模拟电荷力。
.theta(0.9) //默认为 0.9.
.distanceMin(80) //设置或获取最小连接距离              
.distanceMax(400) //设置或获取最大连接距离)
.force("center", d3.forceCenter(this.width / 2, this.height / 2)) //centering作用力可以使得节点布局开之后围绕某个中心。
.force("collision",d3.forceCollide(radius + 4) //设置节点碰撞半径>= 点半径避免重叠
.strength(0.9) //则将碰撞强度设置为指定的数值,强度范围为 [0, 1]。并返回当前碰撞力模型,默认0.7
.iterations(1) // iterations 则将每次应用碰撞检测力模型时候的迭代次数设置为指定的数值。如果没有指定 iterations 则返回当前的迭代次数,默认为 1。迭代次数越大,最终的布局越优,但是会增加程序运行上的消耗。)
.on("end", () => {this.lastTock();});复制代码

//在d3力导向图的拖放事件里,常会用到alphaTarget属性
拖放开始时,alphaTarget设置为比alphaMin更大的值,即会在拖放的过程中力导向图持续运算(防止拖到一半结束的情况)
。
拖放结束时,alphaTarget设置为0,即在拖放结束后的一段时间内,力导向图停止运算。复制代码

二、怎样修改已经设置好的simulation

simulation
  .force("A", null)
  .force("B", null);复制代码

三、simulation的tick有"start"/"end"/"on"三种触发事件,开发的时候却经常被忽略


关注下面的标签,发现更多相似文章
评论