12、D3.js 形状生成器与图表创建指南

D3.js 形状生成器与图表创建指南

在数据可视化领域，D3.js 是一个强大的工具，它提供了多种形状生成器和图表创建方法。本文将详细介绍 D3.js 中的面积生成器、弧生成器的使用，以及常见图表的创建。

1. 使用面积生成器

虽然使用 D3 线生成器可以生成任何形状的轮廓，但直接使用线来绘制面积（如面积图）并非易事。因此，D3 提供了专门用于绘制面积的生成器。

1.1 准备工作

在浏览器中打开以下文件的本地副本：
https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter7/area.html

1.2 操作步骤

以下代码将向伪折线图添加填充区域，将其转换为面积图：

<script type="text/javascript">
    var width = 500,
        height = 500,
        margin = 30,
        duration = 500,
        x = d3.scale.linear() // <-A
            .domain([0, 10])
            .range([margin, width - margin]),
        y = d3.scale.linear()
            .domain([0, 10])
            .range([height - margin, margin]);