資料視覺效果（二） 使用 D3 組件進行布局

瞭解用於繪製各種排列的組件的圖形計算

這個由兩部分組成的系列文章的 第 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. 沒有外部圓圈的包布局