怎麽學習d3.js
vue是一個數據驅動視圖的前端框架,一切皆可作為可重用的組件加以使用
d3則是數據可視化javascript庫
D3.js基礎
1.學習D3.js的語法
語法是必需的,建議自行去官網上學習其語法,如果可以的話最好了解一下函數式編程的curry與compose思想,不建議一開始就去接觸高大上的眾多在線Demo。
2.學習D3.js的編程思路
(1)語法其實可以體現其編程思路,起步當然是學習其強大的選擇器:
d3.select(‘body‘).style(‘background-color‘, ‘black‘)
// 直接選擇 ->並設置屬性
d3.selectAll(‘p‘).style(‘color‘, function() {
// 選擇 -> 動態設置屬性
return ‘hsl(‘ + Math.random() * 360 + ‘, 100%, 50%)‘
})
d3.selectAll(‘p‘).data([4,8,15,16,23,42]).style(‘font-size‘, function(d) {
// 選擇 -> 綁定數據 -> 動態設置屬性
return d + ‘px‘
})
(2) 接著是理解Update, Enter和Exit的思路
// Update…
var p = d3.select("body") // 直接把數據綁定到Dom並輸出,數組元素個數與p節點的個數一致就全部更新文本,如果不一致,就只更新現有p節點的文本,多余的數據會被保存起來,看下面會用到
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…[常用]
p.enter().append("p") // 如果不一致,數組元素個數比p節點多,就插入p節點補足並相應更新文本
.text(function(d) { return d; });
// Exit…[常用]
p.exit().remove(); // 如果不一致,數組元素個數比p節點少,就刪除多余的p節點
(3)然後要學習D3的畫圖一般思路,比如要畫一個線狀圖,那麽我們:
把輸入的原始數據轉化成為標準的D3可接受的數據格式 -> 根據原始數據定義好x軸函數、y軸函數和定義好作圖方式(如d3.line) -> 在SVG上面畫出x軸y軸、根據原始數據結合x軸及y軸函數作線狀圖 -> 再畫出標題等細節的東西
(4)最後,給已經完成的圖形添加動畫效果
沒有動畫效果的圖形看上去會比較乏味。動畫基本寫法如下:
// 把所有圓圈改變半徑 d3.selectAll("circle").transition() // 定義動畫 .duration(750) // 動畫持續時間 .delay(function(d, i) { return i * 10; }) // 元素動畫要延時多少時間開始 .attr("r", function(d) { return Math.sqrt(d * scale); }); // 設置最後效果
怎麽學習d3.js