第11章使用“原力”！ ^[1]

本章将涵盖以下内容：

◆ 使用引力和相互作用力

◆ 生成动量

◆ 设置连接约束

◆ 借助力来辅助可视化

◆ 操作“力”

◆ 绘制力导向图形

11.1 简介

运用原力吧，路克！

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

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

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

换句话说，D3实现了一种数值方法，这种数值方法在粒子级别模拟了简单约束下的牛顿运动方程，其约束条件表示了粒子之间的连接关系。显然，这种布局可以实现理想化的力导向图，不过，由于力可被灵活地自定义，它同样可以生成许多其他有趣的视觉化效果，本章的例子将很好地说明这一点。力布局技术甚至可以应用于界面设计等其他领域。当然，本章也会举例说明力布局的经典用途——力导向图。

11.2 使用引力和相互作用力

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