13、使用D3创建可复用图表全解析

使用D3创建可复用图表全解析

在数据可视化领域，D3（Data-Driven Documents）是一个强大的工具，它能够帮助我们创建各种类型的交互式图表。本文将详细介绍如何使用D3创建几种常见的可复用图表，包括折线图、面积图、散点图和气泡图。

1. 图表约定概述

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

2. 创建折线图

折线图是一种常见的基本图表类型，由一系列通过直线段连接的数据点组成，通常由两个垂直的坐标轴（x轴和y轴）界定。

2.1 准备工作

在浏览器中打开以下文件的