D3 4.x数据可视化实战手册（第2版）

第11章　使用“原力”

本章涵盖以下内容：

• 使用引力和相互作用力
• 自定义速度
• 设置连接约束
• 借助力来辅助可视化
• 操作“力”
• 绘制力导向图

11.1　简介

运用原力吧，路克！

——星球大战中大师对学徒的教导

本章将讲述D3中最为有趣的概念——力。对力的模拟是可视化中最令人激动的技术之一。我们将通过一组具有丰富交互性和功能完整的例子来共同探索D3中力（例如力导向图形）的运用及其涉及的诸多重要概念。

在D3中力的模拟本身并不构成独立的功能，它更多的是作为一种额外的D3布局来使用。如第9章中提到过的，D3布局面向非视觉数据，并生成具有不同视觉效果的布局。力的模拟最初用来实现一种特定的视觉效果——力导向图，它的实现基于标准速度韦尔莱（verlet）积分法对粒子物理作用力的模拟。

换句话说，D3实现了一种数值方法，这种数值方法能够通过阶梯时间函数根据粒子的速度来粗略模拟其运动情况。显然，这种模拟在实现某些可视化元素（例如力导向图）时是非常理想的，因为力可被灵活地自定义。实际上，这种技术的应用领域甚至超出了视觉化，在其他许多领域也有广泛的应用，例如用户界面设计领域等，本章的例子将很好地说明这一点。当然，本章也会举例说明力布局的经典用途——力导向图。

11.2　使用引力和相互作用力

本节将介绍引力和相互作用力两种最基本的力。如前所述，力布局主要目的之一是模拟粒子的运动，而其中关键之一就是模拟粒子间的相互作用力。另外，力布局也实现了伪引力，或更精确一点就是使用弱几何约束将视觉元素控制于SVG内部，防止其超出SVG画布边界。在接下来的示例中，我们将看到这两种基础甚至有时有相反效果的力是如何为粒子系统生成不同效果的。

11.2.1　准备工作

在浏览器中打开如下文件的本地副本：

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter11/ ...