譯者注
原文: 來自 D3.js 作者 Mike Bostock 的 Introducing d3-shape
譯者: ssthouse 聯絡譯者: 郵箱(ssthouse@163.com) & 微信(wssst123456789)
譯文
假設你現在想建立一個用於學習特定資料集的工具, 你最容易想到的呈現方式是什麼呢? 一個可以自定義的 chart? 一個抽象的座標系統? 將資料編碼成影象來表示?
每一種方法都有它的好處. 比如你想做探索性的資料視覺化, 你可能會更偏向於快速(高效)的方法, 因為這樣你可以快速的測試各種不同的視覺化效果. 如果是做講解性質的資料視覺化, 你可能會選擇能精細控制的方法, 以讓你的觀眾能精準的理解你的意圖.
不管你選擇的哪種方法, 你最終都需要將實際的圖形畫在螢幕上, 也就是說你需要用你的資料生成一些能代表這些資料的圖形.
那麼, 你打算如何畫出圖形呢?
一些簡單的圖形, 比如柱狀圖, 通過 canvas 的 api 就可以輕鬆的畫出: fillRect
如果要畫出一些直線, 或者折線也不難, 使用 canvas 的 moveTo , lineTo 方法即可:
但若是想畫出曲線圖呢? 想要畫出 圓滑的曲線 似乎開始變得不那麼容易了:
我們再增加一點難度, 如果我們想要曲線圓滑的同時, 還要保持資料的單調性呢?
再者, 如果我們想畫出扇形切片呢? 如果我們還想給扇形切片加上圓角, 加上切片之間的間距呢,
怎麼樣, 是不是覺得有些挑戰了呢?
這時候該 d3-shape 出場了: d3-shape 是一個用於繪製資料視覺化中常見的幾何圖形的庫. 它非常的小巧, 而且可以同時和 SVG 和 Canvas 協同工作.
d3-shape 有多小?
大概 28kb, 壓縮後僅僅 6kb. 它還包括了 d3-path . 它總共程式碼僅僅 1500 行, 所以我非常推薦你看看它的原始碼.
使用 d3-shape 你將得到什麼呢?
簡單的說, 你將得到繪製 線 和 面 的能力. 包括: 各種各樣的曲線, 派圖, 扇形圖, 散點圖等等.
除此之外還有更多, d3-hierarchy 模組包括了繪製包含層級結構資料的功能(比如樹狀圖). 還有更多獨立的模組能夠幫助你繪製出更多定製化的圖形: 比如 繪製地理位置的影象, 繪製模擬物理系統的網路圖等等.
d3-shape 的目的是什麼呢?
d3-shape 是一個讓你進行資料視覺化的工具. 它特別適合和已有的操作 DOM 的框架一同使用(意味著不需要 d3-selection), 比如 Angular, Vue, React. d3-js 中還有許多方便的模組, 配合著使用能更好的提升你的資料視覺化效率, 比如: d3-color, d3-format, d3-time and d3-scale.
想要貢獻程式碼?
想要自己實現一個曲線生成的演算法? 想要建立一種消除資料噪點的曲線? 檢視原始碼, 在 github 上提交 pull request. 或者檢視編寫 d3 外掛的文章, 建立併發布你自己的 d3 外掛 模組.
祝你 d3-shape 使用愉快!
想繼續瞭解 D3.js
這裡是我的 D3.js 、 資料視覺化 的github 地址, 歡迎 start & fork :tada: