用 D3.js 打造引人入胜的力向导图：让数据栩栩如生

前端

2023-11-02 11:54:53

力向导图：自然而交互式的数据可视化

什么是力向导图？

力向导图是一种基于物理模拟的绘图算法，旨在以自然、美观的方式排列数据元素。它模拟了物理学中的万有引力定律，假设数据元素之间存在相互吸引和排斥的力，这些力会影响元素的位置和运动。

力向导图的工作原理

力向导图背后的原理是基于 velocity Verlet 数值积分器的粒子物理运动模拟。它假设所有粒子的质量常量为 1，单位时间步长为 1。作用于每个粒子的力包括引力和斥力。引力根据万有引力定律计算，而斥力则根据库仑定律计算。

力向导图的优势

力向导图具有以下几个优点：

自然美观： 它可以自动生成具有美感的数据可视化效果。
交互性强： 用户可以通过拖拽、缩放等操作来探索数据，增强了交互体验。
易于理解： 其原理相对简单，易于理解，非常适合数据探索和展示。

使用 D3.js 创建力向导图

1. 准备数据

首先，将数据转换为力向导图的格式，包括节点数据（节点属性）和链接数据（链接属性）。

2. 创建 SVG 画布

创建一个 SVG 画布作为力向导图的容器，它可以轻松缩放和旋转。

3. 定义力向导图模拟器

使用 D3.js 的 forceSimulation() 函数创建力向导图模拟器，负责计算节点的位置和运动。

4. 添加节点和链接

使用 forceSimulation().nodes() 和 forceSimulation().links() 方法向模拟器添加节点和链接。

5. 启动模拟

调用 forceSimulation().start() 方法启动模拟器，模拟器会持续计算节点的位置和运动。

6. 绘制力向导图

当模拟器达到稳定状态后，使用 D3.js 的绘图 API 绘制力向导图，圆圈表示节点，线条表示链接。

7. 添加交互性

使用 D3.js 的交互性 API 添加交互性，例如允许用户拖拽移动节点或缩放画布。

示例代码：

// 准备数据
const nodes = [
  { id: 1, name: "Node 1", size: 10 },
  { id: 2, name: "Node 2", size: 15 },
  { id: 3, name: "Node 3", size: 20 },
];

const links = [
  { source: 1, target: 2, weight: 1 },
  { source: 1, target: 3, weight: 2 },
  { source: 2, target: 3, weight: 3 },
];

// 创建 SVG 画布
const svg = d3.select("body").append("svg");

// 定义力向导图模拟器
const simulation = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(svg.attr("width") / 2, svg.attr("height") / 2));

// 添加节点和链接
simulation.nodes(nodes).on("tick", ticked);
simulation.force("link").links(links);

// 绘制力向导图
function ticked() {
  svg.selectAll("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);

  svg.selectAll("line")
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);
}