了解用于绘制各种排列的组件的图形计算
这个由两部分组成的系列文章的 第 1 部分概述了 SVG 和 D3 的结合使用，提供了创建社交媒体的浏览数据可视化表示的一些基本示例。第 2 部分将介绍在 SVG 图形中使用不同图形组件排列或布局的步骤。您将学习如何使用 D3 强大的图形计算在 SVG 画布上放置组件，以及如何将自己的图形操作与 D3 的布局相结合。我还将探讨如何使用 JavaScript 对象表示法 (JSON) 作为一种可用于可视化的数据格式。本文最后将展示如何使用布局组合在单个 SVG 画布上排列各种图形组件。
本文中的概念和示例以 第 1 部分中的概念和示例为基础，所以在继续阅读本文之前，请务必阅读或复习第 1 部分。阅读第 2 部分时，您可能会发现，在浏览器中并列打开两篇文章会很有用，这样您可参考第 1 部分中的图像。参见 下载，获取第 2 部分的样例代码。
D3 的图形布局简介
我以 第 1 部分中学到的 D3 功能为基础开始构建。
回想一下，第 1 部分中的图 1 和图 2 仅在圆圈排列上存在区别，这些图的 JavaScript 代码中的 transform属性值（如第 1 部分中的清单 2 和清单 4 所示）会计算每个圆圈中心的相对位置。
在 D3 的术语中，确定各个组件相对位置的图形计算被称为 布局。D3 提供了多种强大且可重用的布局。第 1 部分中的圆弧和弦的排列就是其中之一。知道如何单独使用 D3 的布局并能与自己的图形计算相结合，会很方便。
D3 包布局 (Pack layout)（如图 1 所示）是一个较大圆圈内的一个圆圈包。（与 第 1 部分中一样，这些圆圈描绘了第 1 周的页面查看数据。）在本文中，我将演示如何结合使用包布局和我自己的一些计算。
图 1. 在一个较大圆圈中显示圆圈的包布局
图 1中的圆圈与第 1 部分中生成的圆圈相同，但采用不同的排列方式。图形计算所导致的区别由 D3 的包布局完成。
没有外部的圆圈，图 1中的布局类似于图 2：
图 2. 没有外部圆圈的包布局