1. 程式人生 > >怎麽學習d3.js

怎麽學習d3.js

怎麽學 屬性 ont java append 細節 pos .text 持續時間

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