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