怎麼學習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); }); // 設置最後效果