13、D3 图表创建指南：从折线图到气泡图

D3 图表创建指南：从折线图到气泡图

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

图表创建的基本约定

在开始创建具体的图表之前，我们需要了解一些基本的约定，这些约定将贯穿整个图表创建过程。

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

创建折线图

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

准备工作

在浏览器中打开以下