[譯] D3.js 之 d3-shap 簡介
譯者注
原文: 來自 D3.js 作者 Mike Bostock 的 Introducing d3-shape
譯者: ssthouse 聯繫譯者: 郵箱([email protected]) & 微信(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: