D3.js数据可视化实战手册

第9章 井然有序 ^[1]

在本章中我们将涉及如下内容：

◆ 创建饼图

◆ 创建堆叠面积图

◆ 创建矩形式树状结构图

◆ 创建树

◆ 创建封闭图

9.1 简介

本章将着眼于布局——这个我们先前从未涉及的概念。D3提供了一系列布局算法以排列多个元素，但是在深入介绍这些内容之前，我们首先要明确一些和布局相关的非常重要的属性。

◆ 布局是一种数据：它以数据为中心，并由数据驱动，不能生成任何图形或产生任何输出。这使得它可以在不同环境下甚至是没有图形输出的环境下复用，例如SVG 或canvas。

◆ 抽象性和复用性：布局是抽象的，因此，它具有较高的灵活性和复用性。你可以使用各种不同的方法来组合或者复用布局。

◆ 布局之间是不同的：每个布局都是不一样的，每一个D3提供的布局都着眼于一个非常明确的图形需求，并有其相应的数据结构。

◆ 无状态性：为了简化使用，布局是无状态的。这里的无状态指的是，一般情况下布局就像函数一样，可以被调用很多次。对于不同的输入数据将产生不同的布局结果。

D3中的布局是一个有趣并且强大的概念。在本章，我们将创建全功能的可视化效果，并将布局应用其上，借此来探索一些D3中最常见的布局的使用方法。

9.2 创建饼图

饼图，或者称之为圆形图，是一个包含多个扇形的圆，扇形大小用以表示各部分所占比例。本例中，我们将使用 D3 的圆形布局（pie layout）和其他特性创建一个全功能的饼图。在第 7 章的时候我们已经看到使用D3 的圆弧生成器是非常枯燥的。每一个生成器都需要以下的数据格式。

var data=[

{startAngle: 0, endAngle: 0.6283185307179586},

{startAngle: 0.6283185307179586, endAngle: ...