數據可視化之路 - d3入門

時間 2019-11-06

標籤數據可視化之路 d3 入門简体版

原文原文鏈接

d3 可能是前端可視化領域最有名的工具了，這篇文章會簡單介紹下 d3 這個工具。javascript

d3是什麼

按照官方文檔上說，d3 是一套數據可視化工具，用來幫咱們創建數據驅動的 DOM 模型。（固然也包括圖表），可是和 DataV、Echarts 之類圖表不一樣的是: d3 並非開箱即用的，使用 d3 須要對諸如 html、svg、canvas技術有足夠的瞭解，同時也給咱們開發提供了更多的靈活性。html

這裏的條形圖能夠看到 d3 是如何作可視化的。前端

d3包括那些組件

Selection

若是你以前接觸過d3，那麼你可能對d3 selection 的鏈式調用有所瞭解。和 jquery 同樣，d3 封裝了大部分 DOM 方法，調用其方法會返回一個 selection 對象，你能夠接着在這個對象上對 DOM 進行增刪改查，事件綁定等操做。java

~~這是一段從官網copy過來的例子~~react

d3.selectAll("p").style("color", "blue");
複製代碼

數據映射

現代前端框架都強調數據驅動，D3中也有相似的概念。例如：jquery

// 步驟1. 綁定數據和 selection
var p = d3.select("body").selectAll("p").data([4, 8, 15, 16, 23, 42]);

// 步驟2. Enter…
p.enter().append("p").text(function(d) {
  return d;
});
// 步驟3. Exit…
p.exit().remove();
複製代碼

步驟 1 中咱們將 selection 和對應的數據映射起來，selection 中的一個節點對應了數組中一條數據。注意此時並不會生成真實的 dom 節點。步驟二、3 中咱們分別聲明瞭數據新增時和刪除的 selection 操做。d3 會在數據變化時調用這些操做。
經過數據映射，d3 將數據和 selection 鏈接起來，使咱們免受複雜 dom 狀態的困擾，而且保證生成的 dom 是可預測的。enter 和 exit 可讓咱們更細粒度的觀測到數據的變化，從而做出對應的處理。（好比節點刪除動畫）git

Layout

Layout ，顧名思義，是佈局的意思。但d3中的layout強調的是算法而非渲染，這和dataV 或echarts 中將數據和配置傳入，直接能夠渲染圖表不一樣。以 tree 爲例：github

d3 的 tree 會接受樹結構的數據，通過 layout 的轉換，加上座標，而後數據綁定到 selection，渲染出樹結構。能夠看到，layout 只負責座標轉換和計算的部分，至於渲染，d3 不會幫你封裝好，須要你主動的用 svg、canvas 甚至html進行渲染。算法

這裏是使用 d3 渲染一棵樹的例子。canvas

在 React 中使用

react 和 d3 都強調數據驅動，因此將二者結合其實是很是方便的。
咱們只須要將數據保存在react中，把數據和 d3 鏈接起來，使用d3來繪製頁面便可，好比這個例子
須要注意的是，state 變化時 d3 並不會執行 enter 或者 exit 內的方法，須要咱們手動 componentDidUpdate 聲明週期中主動執行渲染操做。這和 Vue 和 React 的響應式是不一樣的，d3 並不會去監聽 data 的變化，也就不會執行對應的 enter 或 exit 操做。

組件封裝

組件化也是很重要的，特別在整個工程變得複雜以前。d3 中也提供了封裝組件的方法。這就是 selection.call 方法，例如：

// 聲明一個函數，接受 selection 做爲參數
function makeStyle(selection) {
  selection.style("width", 300).style("height", 300);
}
// 在 div 的 selection 上調用它
d3.select("div").call(makeStyle);
複製代碼