1 关于力导向图的源码分析
https://segmentfault.com/a/1190000008578391
https://segmentfault.com/a/1190000008914772
https://blog.csdn.net/wry2008wry/article/details/80812562
(1)需要理解的 a.布局 b.力作用
(2)各种力包含向心力,静电力,连接力。
(3)
link.js - 实现“连接力”,即当两个结点间有边时相互拉拢,但也不能太近;
manyBody.js - 实现“多体”力,用于模拟引力及静电力;
radial.js - “圆环力”,实现半径布局即结点分布在一个圆环上;
center.js - “中心力”实现,实现结点向中心点收拢;
(4)tick函数
tick函数的作用:由于力导向图是不断运动的,每一时刻都在发生更新,因此,必须不断更新节点和连线的位置。
力导向图布局 force 有一个事件 tick,每进行到一个时刻,都要调用它,更新的内容就写在它的监听器里就好。
(5) 这种各种力的计算是对于scale的计算还是说对于直接的数据计算呢。我感觉应该是对于scale的计算吧。
答:在center.js之前的力都是随机的计算都是scale,当经过center.js计算之后,中心和具体的像素就对应上了,就不是scale了。
(6)center.js改变的是nodes中 每个节点的x,y那么link.js改变的是什么呢. links的每个节点的x,y么。那么他就不改变nodes么。
答:links的指针指向了nodes中。
(7) 尝试: 不考虑引力的,或者线的情况下,用四叉树做一个只有圆的点的布局。
(8) 力导向图有动画,尝试去掉动画,去掉alpha的值。直接显示出来。
力引导图的位置的计算本来就是一个多次循环的过程,越来越偏向我们需要的,只不过,d3的力引导图把这个过程显示出来了,也可以更具,alpha值的变化,只显示最后计算后的图。
(9) 为什么在力引导图中没有出现碰撞粒子检测呢,collide.js
alpha代表冷却参数或者衰减参数
第一次经过nodes方法初始化计算出来的值。
其中:
var initialRadius = 10,
initialAngle = Math.PI * (3 - Math.sqrt(5));

Ps: 这个结果分析可以看出,x,y刚开始是不受真实的容器的宽高影响的。
2 简书 陈坚生
https://www.jianshu.com/p/cc772e6c99d1
3 关于d3的四叉树的源码分析
https://blog.csdn.net/tengxing007/article/details/59712572