D3 4.x数据可视化实战手册（第2版）

第9章　井然有序

本章涵盖以下内容：

• 创建饼图
• 创建堆叠式面积图
• 创建矩形式树状结构图
• 创建树
• 创建封闭图

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: 1.2566370614359172}, 　... 　{startAngle: ...