程式人雜誌 -- 2014 年 11 月號 (開放公益出版品)

d3.js -- 互動式繪圖框架

d3.js 是一個在瀏覽器裏使用的互動式繪圖框架，使用 HTML、CSS、JavaScript 與 SVG (Scalable Vector Graphics) 等技術。

d3.js 專案起始於 2011 年，是從 Protovis 專案修改過來的，通常我們會用 D3 來產生 SVG 或 CSS 的繪圖結果，在瀏覽器上檢視時還可以利用 SVG 或 CSS 與使用者進行互動。

d3.js 的用法有點像 jQuery，都是透過選擇器來進行選取後操作的，舉例而言、下列指令可以選出所有 p 標記的節點並將顏色修改為 lavender (淡紫色、熏衣草)。

 d3.selectAll("p")
   .style("color", "lavender");

我們可以透過「標記 tag、類別 class、代號 identifier、屬性 attribute、或位置 place 來選取節點，然後進行新增、刪除、修改等動作，然後透過設定 CSS 的轉移 (transition) 屬性，讓繪圖的結果可以和使用者進行互動，舉例而言、以下程式就會讓網頁裡的 p 標記節點逐漸地改變為紫色。 (d3.js 預設的改變速度為 250ms 完成轉換)

 d3.selectAll("p")
   .transition()
   .style("color", "pink");

由於 SVG 裏的標記也是 HTML 的一部分， d3 的指令也可以選取 SVG 裏的內容，以下來自 Mike Bostock 網站的 範例 顯示了這個狀況：

<svg width="720" height="120">
  <circle cx="40" cy="60" r="10"></circle>
  <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>
...
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>

d3.js 的主要 API 包含下列幾類：

而以下的專案則是延伸自 d3.js 的套件，

甚至還有人專門為 d3.js 寫了一本書，而且這本書還有中文版。

參考文獻