如何用d3.js力导布局制作长尾关键词资源拓扑图？

本文共计4024个文字，预计阅读时间需要17分钟。

前言+最近公司业务服务老出bug，各位大佬盯着链路图找问题找的头昏脑胀。某天大家丢了一张图过来，我们做个资源拓扑图吧，方便大家找bug。就是这个图，应该是马爸爸家的好图吧。

前言

最近公司业务服务老出bug，各路大佬盯着链路图找问题找的头昏眼花。某天大佬丢了一张图过来“我们做一个资源拓扑图吧，方便大家找bug”。

就是这个图，应该是马爸爸家的

好吧，来仔细瞧瞧这个需求咋整呢。一圈资源围着一个中心的一个应用，用曲线连接起来，曲线中段记有应用与资源间的调用信息。emmm 这个看起来很像女神在遛一群舔狗... 啊不，是 d3.js 力导向图！

d3.js 力导向图

d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数与图形算法。其中力导向图（Force-Directed Graph）是 d3.js 提供的一种十分经典的绘图算法。通过在二维空间里配置节点和连线，在各种各样力的作用下，节点间相互碰撞和运动并在这个过程中不断地降低能量，最终达到一种能量很低的安定状态，形成一种稳定的力导向图。

d3.js 力导向图中默认提供了 5 种作用力（以最新的 5.x 为准）：

中心力（Centering）

中心力作用于所有的节点而不是某些单独节点，可以将所有的节点的中心一致的向指定的位置移动，而且这种移动不会修改速度也不会影响节点间的相对位置。