背景

近期有一个需求需要参考wordwebs的实现，对与我来说是一个比较少接触过的方向，所以在做完这个需求后，想把一些陌生的东西重新过一遍，写下此文用作记录。

此文仅为简单介绍以及展示d3-force的一些力的效果

从例子中可以考到这个场景的交互比较多，既可以扩展小球，又可以拖拽小球以及画布，画布也是一个无限大小的状态，目前已知的一些图表库并不能很好地支持这个场景，找到一个具备类似功能的，但它又不是支持免费商用的，所以打算自己去实现，经过一番努力，终于完成了这个需求。最终的实现效果可以在这个 d3-force-pj 体验一下。

这里面主要用到了d3-force提供的能力来实现，下面我会通过几个例子简单介绍一下d3-force所提供的几种力的效果。

继续阅读文章之前可以先打开这个地址 d3-force-tutorial ，在阅读文章的时候跟着操作，加深印象

D3-force

D3 的全称是（Data-Driven Documents），顾名思义，是一个被数据驱动的文档。简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。本文主要介绍其中的d3-force这个库，对于我们实现力导向图十分有帮助，下面主要介绍它提供几种力的效果。

Position

顾名思义，这是一种“位置力”，可以理解为这个位置有一个力对node有吸引力，node有向力所在的位置运动的趋势，可以由以下的例子直观的感受:

此时力的位置在中心，小球都向中心移动。

当然也可以调整力的位置，使小球向其他地方运动。

在设置这个力的时候，我们可以配置位置与力的大小strength，大家可以在demo中自行体验。

在上面的例子中，小球都向position力的方向移动了，但总感觉缺少了什么。说起来就是小球都叠起来了，没有"大小"，想要给小球“大小”，可以通过下面的“力”来实现。

Collide

collide可以用于配置node的“碰撞力”，可以理解为使小球有了“大小”的属性，再“碰撞力”重叠的范围内，小球会分开，保持平衡。下面通过在position上叠加collide看看“碰撞力”的表现。

可以看到小球小球既有向中心移动的趋势，又受碰撞力的影响，两个力有冲突，最终到达一个相对平衡的状态，这个平衡与position力和colliede力的大小有关，也有可能没有平衡状态。通过调整这两个力的参数，可以实现一下有趣的效果：

这个例子里的小球都是同样的大小，你也可以尝试分别给不同大小的小球不同的“碰撞力”，会有不同的效果。

Charge

上文介绍的两个力都是相对来说比较“静态”，如果只有“位置力”没有“碰撞力”，效果比较寡淡。如果只有"碰撞力“没有”位置力“，可能整个画面都不会动。

上述两个力需要配合起来才有比较好的效果，下面介绍另外一种能让小球”活“起来的力 —— charge(电荷力)。从字面上理解，这个力就是让小球直接互相吸引或者排斥的力。表现就是会让小球聚集在一起或者分散开来（注意与“碰撞力”不同）

让collide力配合互相吸引的charge，也能达到上面与position力相互作用的效果

Radial

radail(径向力)是一个比较特殊的力，找不一个和这个力比较类似的力来描述它。暂时这么简单地解释这个力：这个力会使node向预定的半径的位置移动。这么说可能比较不好理解，直接从例子看:

在这个力的作用下，小球都会向设置好的半径移动，此时radial力的中心是画布中心，如果这个力在不同的方向，会有不同的表现，下面这个例子我把radial设置在画布的右下角，此时小球会聚集在这个力的圆弧上而不是分散成一个圆：

配合collide力，也可以实现一些比较有趣的效果：

合并体验

在示例工程中也提供了上述几种力共同作用的体验页面，大家可以通过打开mix去体验一下各种力的存在与否，大小之间的相互关系，通过操作来加深对这几种力的了解。

总结

上面简单介绍是d3-force提供的几种基础的力，d3-force通过帮我们模拟各种常见力的效果，帮我们计算出在复杂的导向力不同节点的位置，使我们在不用去关注节点的位置，而把精力集中在绘制上。当然，对于比较常见的统计图的绘制，d3用起来并没有 HighCharts、ECharts、G2等图库便捷，但d3专注的地方更为底层，虽然上手没有前面的图表库快，但它可供控制的地方更多，提供的定制能力更为强大，如果业务需求比较灵活，可以考虑使用d3来帮助开发。

资料

• 例子代码仓库： github.com/lastnigtic/…
• 例子体验地址： lastnigtic.cn/static-page…
• demo体验地址： lastnigtic.cn/static-page…

欢迎指出错误或提出问题，互相交流，共同进步😁