节点与链接简介

引言

在上一课探索了多种图表之后，我们来学习不同的可视化工具。
有些类型的数据很难通过传统图表来展示。例如，当我们需要表示不同城市之间的连接关系时，就需要使用节点和连线来呈现网络结构。

在上图中，节点代表城市，而连线用于连接这些城市。

网络布局

在绘制网络之前，先了解网络的基本概念。要绘制节点与连线构成的网络，我们需要知道每个节点的位置信息。正如我们在饼图中使用角度生成器为数据添加角度信息一样，绘制网络时也需要位置信息来确定节点和连线的坐标。D3.js 提供了 d3.forceSimulation() API 来为节点添加位置信息。该方法创建一个动态模拟过程，根据设定的约束条件，自动将节点以最优方式排列。

d3.forceSimulation() 使用力来控制视觉元素的位置。可以在元素之间设置各种力，例如：

• 所有元素相互排斥（forceManyBody()）
• 元素被吸引向重心（forceCenter()）

在下面的例子中，我们将借助 d3.forceSimulation() API 为数据添加位置信息。

说明

如上述代码所示：

• 第20行：我们将 graph 中的 nodes 传入 forceSimulation()，这会创建一个初始状态下没有力的模拟。
• 第21行：我们使用 d3.forceLink() 创建一种力，基于节点之间的 links 关系。d3.forceLink() 接收 links 数据作为输入，其中包含 source 和 target 节点。随后我们通过 id 映射到 name 字段，表明 source 和 target 是依据 nodes 中的 name 字段来指定的。
• 第23行 和 第24行：我们创建了两种力。forceManyBody 用于平衡 forceLink 的拉力，并使节点之间相互排斥；forceCenter 则用于将节点保持在画布中心区域。
• 此时查看控制台输出的数据，可以看到每个节点的 x 和 y 坐标，以及它们的 vx 和 vy 速度值，这些速度值用于计算作用力。

注意：为了正确绘制网络，必须在数据中明确指定 source 和 target。