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

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

1. D3 形状生成器概述

D3 提供了多种形状生成器，如线、面积、弧等，这些生成器能帮助我们创建各种复杂的图形。下面将详细介绍这些生成器的使用方法。

1.1 使用面积生成器

1.1.1 准备工作

在使用面积生成器前，需要打开本地的 area.html 文件：

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter7/area.html

1.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]);