前言
最近公司业务服务老出bug，各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧，方便大家找bug”。
就是这个图，应该是马爸爸家的
好吧，来仔细瞧瞧这个需求咋整呢。一圈资源围着一个中心的一个应用，用曲线连接起来，曲线中段记有应用与资源间的调用信息。emmm 这个看起来很像女神在遛一群舔狗... 啊不，是 d3.js 力导向图！
d3.js 力导向图
d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数与图形算法。其中力导向图（Force-Directed Graph）是 d3.js 提供的一种十分经典的绘图算法。通过在二维空间里配置节点和连线，在各种各样力的作用下，节点间相互碰撞和运动并在这个过程中不断地降低能量，最终达到一种能量很低的安定状态，形成一种稳定的力导向图。
d3.js 力导向图中默认提供了 5 种作用力（以最新的 5.x 为准）：
中心力（Centering）
中心力作用于所有的节点而不是某些单独节点，可以将所有的节点的中心一致的向指定的位置移动，而且这种移动不会修改速度也不会影响节点间的相对位置。
碰撞力（Collision）
碰撞力将每个节点视为一个具有一定半径的圆，这个力会阻止代表节点的这个圆相互重叠，即两个节点间会相互碰撞，可以通过设置 strength 设置这个碰撞力的强度。
弹簧力（Links）
当两个节点通过设置 link 连接到一起后，可以设置弹簧力，这个力将根据两个节点间的距离将两个节点拉近或推远，力的强度和这个距离成比例就和弹簧一样。
电荷力（Many-Body）
通过设置 strength 来模拟所有节点间的相互作用力，如果为正节点间就会相互吸引，可以用来模拟电荷吸引力，如果为负节点间就会相互排斥。这个力的大小也和节点间的距离有关。