13、用 D3 实现可复用图表的技术指南

用 D3 实现可复用图表的技术指南

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

图表约定

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

创建折线图

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

准备工作

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

https://github.com/NickQiZhu/d3-cookbook/b