cover

正在學 D3.js 嗎?那錯過這篇你就糗大了!大約在兩個多月前, D3.js 作者 Michael Bostock 宣佈下一版本的 D3.js – D3.js 4.0 開始釋出 Alpha 版,相信再過不久、 Beta 與正式版也很快就要跟大家見面,其中的改動可說不少,如果你正要開始學 D3.js ,趕快一起來看看 4.0 裡面裝了什麼料,才不會因此抽中再學一次的大獎喔!

D3.js 的作者 Michael Bostock 在去年年中宣布將結束紐約時報的工作,並將心力完全放在打造視覺化工具上面,震驚了許多視覺化領域的同好。與其說震驚,不如說感到驚喜,因為 D3.js 的作者宣布要專注於打造視覺化工具,大概也就代表當下最受歡迎的D3.js 將會有更多更棒的新功能不斷冒出來!

然而,每次大改版對軟體的使用者都是陣痛苦,需要重新學習、理解與適應;所幸兩個月前 D3.js 4.0 Alpha 版開始釋出,我們有機會事先了解到 D3.js 大升級的內容,有更多的時間可以自我調整。那麼, 新版本的 D3.js 究竟有什麼樣的改動呢?

模組化

首先,第一個最大的改變就是: D3.js 模組化了!原本整包的 d3.js ,現在切成許多小塊,各別放在不同的專案目錄下。這樣做的好處主要在於:

  • 易擴充 — 任何人可以用相同的方式建立 D3.js 的新模組。
  • 易替換 — 我們可以把 D3.js 的原生實作替換成自己的版本。
  • 最小化 — 當我們不需要完整的 D3.js 實作時,可以自行快速建立客製版本。
  • 本機化 — 不會用到 DOM 或瀏覽器功能的元件,馬上就可以搭配 node.js 使用。

若我們要自行建立一個新的 D3.js 模組,只要下載 Bostock 提供的樣版檔,將內容修改為我們的模組即可,甚至也可以試著提交進 D3.js 的程式庫。目前 4.0 Alpha 版的各個模組都放在 D3.js 的程式庫中,皆以 「d3-」 開頭,模組功能做結尾,例如「d3-shape」 協助我們繪製各種形狀,「d3-scale」則包含了原先 d3.scale 裡的函式組。在我們撰文的當下大約已有 34 個 d3.js 模組,有興趣可以到 D3.js 的程式庫 中一睹為快。

命名規則

另一個很大的不同在於命名的方式;很多原本就有的 D3.js 函式,使用方式將會有些許不同。例如在現有的版本中,我們可以利用 d3.scale.linear() 建立一個線性轉換函式,然而預計在 4.0 版中 linear 會直接於 d3 物件之下存在,變成:

  d3.scaleLinear()

其它類似的例子還有 d3.voronoi() ( 原本是 d3.geom.voronoi() ) 、 d3.line() ( 原本是 d3.svg.line() ) 。這個改變會影響到所有舊的 D3.js 用戶,讓 D3.js 不再向下相容,所以要特別注意。

用法改變

除了命名方式,有些工具的使用方式也與先前不同了,比方說建立軸線的 d3.svg.axis() 函式,並非只是改名為 d3.axis() 而已,而是包含了其走向:

  d3.axisLeft()

另外像是設定動畫速率的 d3.transition().ease() 函式,也因為 easing function 整組拉出來成為 d3-ease 而改變了參數的使用方法。原本的寫法若是:

  transition.ease("back", 3);

那麼 4.0 之後則會變成:

  transition.ease(d3.easeBackIn.overshoot(3));

新增的功能

此外, D3.js 當然還有增加許多有趣的功能!我們挑一些有趣的改變在此做一個簡單的條列:

  • d3-interpolate 模組讓我們可以自由內差物件、陣列、各種顏色 ( RGB、HSL 等 ) 、甚至 CSS 與 SVG 的 Transofmration。
  • 利用 d3-active 來做連鎖動畫 ( 可參考此範例  )
  • d3-color 開始支援透明度
  • d3-scale 增加 band 與 point 兩種轉換,分別對應到長條圖與散佈圖的使用;也新增了數組類似 category20 的預建函式,不同的地方在於這些函式產生的是內差過的顏色值:
    sequential-color

估計這些只是新增內容中的一小部份,畢竟目前只是 Alpha 版釋出,讓我們繼續期待 D3.js 4.0 後續的更新吧!

總結

其實 D3.js 除了做為一個強大的視覺化函式庫,其提供的許多功能在各種場合也都相當方便,例如例用 d3.csv 讀取 CSV 檔、透過 d3.geo.path 轉換 geojson 檔案等等,在過去未模組化的時候我們只能另尋其它可能,現在卻真的可以考慮 D3.js 更多種的不同用途了!然而,開源專案最棒的一點還是在於所有使用者都有機會貢獻,你是否也曾經自行開發過 D3.js 所缺乏的功能呢?現在,可以考慮包裝成 D3.js 模組,貢獻回 D3.js 囉!


Written by infographics.tw

2 Comments

ShaunWu

請問是已經更新到4.0了嗎?我去看github,還是用3.5的版本,所以想確定一下。

Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *