譯者注
原文: 來自 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-timeand
d3-scale想要貢獻代碼?
想要自己實作一個曲線生成的算法? 想要建立一種消除資料噪點的曲線? 檢視源代碼, 在 github 上送出 pull request. 或者檢視編寫 d3 插件的文章, 建立并釋出你自己的
d3 插件子產品.
祝你 d3-shape 使用愉快!
原文釋出時間為：2018年07月02日
原文作者：ssthouse
本文來源：
掘金 https://juejin.im/entry/5b3a29f95188256228041f46如需轉載請聯系原作者