7、D3 数据可视化：过渡、动画与图形构建指南

D3 数据可视化：过渡、动画与图形构建指南

1. 数据处理与条形图创建

在 D3 中进行数据可视化时，首先要定义两个数据集。为了简化操作，数据集中仅包含 y 值，而每个数据项的水平位置则通过其数组索引来确定。接下来，需要找出数据点的数量以及两个数据集中的整体最大值。

// 定义两个数据集
const ds1 = [10, 20, 30, 40, 50];
const ds2 = [25, 35, 15, 45, 55];

// 计算数据点数量和整体最大值
const numPoints = ds1.length;
const maxValue = Math.max(...ds1, ...ds2);

然后，创建两个比例尺对象，它们的作用是将数据集中的值映射到垂直方向，同时将数组中的索引位置映射到水平像素坐标。有了这些准备后，就可以创建条形图了。这里的每个“条形”都是用粗线来表示，而非 <rect> 元素。

// 创建比例尺对象
const xScale = d3.scaleBand()
  .domain(d3.range(numPoints))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, maxValue])
  .range([height, 0]);

// 创建条形图
const svg = d3.select("body").ap