[譯] D3.js 之 d3-shap 簡介

[譯] D3.js 之 d3-shap 簡介

譯者注

原文: 來自 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:

D3-blog

若是以爲不錯的話, 不妨點擊下面的連接關注一下 : )

github主頁

知乎專欄

掘金