13、使用 D3 构建可复用图表的详细指南

使用 D3 构建可复用图表的详细指南

在数据可视化领域，D3（Data-Driven Documents）是一个强大的 JavaScript 库，可用于创建各种交互式图表。本文将详细介绍如何使用 D3 创建可复用的图表，包括折线图、面积图、散点图和气泡图。

1. 图表约定

在开始创建具体的图表之前，有几个重要的图表约定需要了解：
- 边距（Margins） ：每个图表都有四个不同的边距设置，即左、右、上和下边距。灵活的图表实现应允许用户为每个边距设置不同的值。
- 坐标转换（Coordinate translation） ：图表主体（灰色区域）的坐标参考应使用 SVG 的 translate 转换 translate(margin.left, margin.top) 来定义。这种转换将图表主体区域移动到所需的位置，并简化了在图表主体内创建子元素的工作。
- 坐标轴（Axes） ：图表坐标轴应放置在图表边距内，而不是作为图表主体的一部分。这种方法将坐标轴视为图表的外围元素，避免了图表主体实现的复杂性，并使坐标轴渲染逻辑独立于图表且易于复用。

2. 创建折线图

折线图是一种常见的基本图表类型，由一系列通过直线段连接的数据点组成，通常由 x 轴和 y 轴界定。以下是使用 D3 创建可复用折线图的详细步骤：

2.1 准备工作

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

https://githu