今天我們將花更多時間介紹 d3.js 這套 JS 套件。這幾篇我們嚴重參考了 d3-for-the-impatient 這本近期出版的書籍。

D3.js 又稱 D3 ，縮寫自 Data-Driven Documents ，我們可以用他來玩轉前面提到瀏覽器的 DOM 物件並創造出具互動性的各類圖表，直方圖、圓餅圖、各種圖包括地圖。
有別於其他種製圖工具出 PNG, JPEG 圖、你再放到網頁 <img> 元素的繁瑣流程。 D3 提供了豐富、類似 JQuery 的 DOM 操作函式、並提供一套方便讓 “資料” 與 DOM, CSS, event 建立關聯的函式庫，並做出互動圖表。我們可以直接在瀏覽器裡透過 JS 拿原始資料後操作 DOM 產出 SVG 的向量圖或是其他的其他的如 <table> 之類的元素。
範例如

• 之前看到的墨西哥地圖。
• 會動的 sin 波型

D3 跟一般的繪圖軟體很大的不同是:

• 不是直接拿滑鼠就開始畫線、方塊...，而是你拿著資料透過 SVG + CSS 依據你的需求一步步畫出你要的圖（所以有人說學習曲線很陡）。

SVG 的參考資料看這邊：
mozilla: tutorial, Element, Attribute, draft of SVG2.0

• 你可能會覺得這樣我自己寫程式手刻不就好了，d3 厲害的是他把你手刻可能會用到的各種功能都很好的包裝好，並提供很大的自由度。

進入正文

select, bind, update

select

d3 是操作 dom 的函式庫，我們可以用 selection 這個物件來完成 選取、連接資料、繪圖這 d3 最常做的幾件事。

在瀏覽器環境引入 d3 函式庫後我們可以透過 d3 這個全域物件來呼叫 d3.select(selector) 選取需要的 dom 節點，這會回傳一個 selection 物件。 d3 支援 method chaining, 你在拿到一個 selection 物件之後可以再接著呼叫一次 select 來取交集如：

d3.select( "#item_container" ).
   selectAll( ".user" )    

selector 內可帶入 CSS selector 語法，上例將會選 id 爲 item_container 的第一個 element, 後再取其中所有的 class 為 user 的 dom 節點。如果找不到符合的，select 會回傳一個空的 selection 物件。

關於詳細的 CSS selector 可以參考 mozilla 的文件1 文件2

bind data

拿到 selection 之後我們通常會跟著呼叫 .data(d) 方法，d3 會試著把 selection 裡面的 dom 節點 跟你帶入的資料d做比對，接著回傳符合的 selection 物件。你可以接著對這個物件呼叫 enter() 或是 exit() 來對 d 多出來的 及 少的資料做處理。
概念圖請見此連接中的123

範例如下：

//把新增資料加入圖中
d3.select( "svg" ).selectAll( "circle" )
    .data( data ).enter()
    .append( "circle" ).attr( "fill", "red );
//把舊資料自圖中移出
d3.select( "svg" ).selectAll( "circle" )
    .data( data ).exit()
    .remove();

因為函式庫主要就是配合著資料來跟 dom 打交道，所謂的 data driven document 我想大略就是因此得名。

data() with key

d3 預設會拿陣列裡的值跟 collection 裡 dom 節點做比對，我們也可以讓 data 方法透過資料的 key 來做比對
概念請見此連接中的4圖

如果有多、少的 key 資料，d3 處理方式如連接中的5圖

範例解說

這裡我們舉書中範例來做說明：link

0. //<1>, <2> 處是我們範例用到的資料，資料有附 key。
1. <3> 線性的我們的資料(1~5的正整數) 依 svg 的寬高做映射。
2. <4> 用 select 取得兩個 svg collection
3. <5> 用 ds1 的資料畫出資料 y 軸，注意 SVG 的 原點是在 左上，往右為 +x, 往下為 +y。
4. <6> 以 ds1 資料畫出初始資料，data 在第一次呼叫會拿到空的 collection, 因為一開始沒有任何 svg circle, enter 接著讓我們處理這三筆新資料，各透過 d3 包裝的 svg 函式畫圈圈。
5. <7> on 函式用來註冊瀏覽器事件，並帶入第二筆資料。
6. <8> 幫我們 data() 呼叫後有更新的部分 加個動畫。
7. <9> data() 沒配對到的資料透過呼叫 exit() 上色做區別。
8. <10> 左右兩圖的差別是，一個在<7>更新資料時有加 key 一個沒有。如果像右邊沒加的話，d3會直接更新頭兩筆資料。

這例子我們可以看到關於 select, bind, update 這個 d3 常見手法的操作

下期我們會找台灣行政區的資料，然後用 d3 來畫更多地圖。

其他補充

d3 是以 ES6 的模組功能來進行開發，selection 是裡面的其中一個模組，你可以只引用你需要的，詳見 d3 文件，內有模組一覽：https://github.com/d3/d3/blob/master/API.md#selections-d3-selection