近期略有點諸事不順，趁略有閑余之時，玩起D3.js。之前實際項目中主要是用各種chart如hightchart、echarts等，這些圖形庫玩起來貌都是完美的，一切皆可配置，但幾年前接觸了D3之后，覺得前面那chart類庫局限的地方在于，基本不可定制；而D3呢，你說了算，你想畫出什么樣的圖，你說了算，自由度很大，當(dāng)時就有點膜拜和仰慕，小打小鬧的玩了幾下，沒有沉下心來專心去玩，當(dāng)時覺得真的很難。不理解，也看不進去。

后面因為接觸了react、redux，接觸了函數(shù)式編程。再回過頭來從新?lián)v鼓起D3來，感覺沒那么困難了，D3其實也有點函數(shù)式編程的思路。別被標(biāo)題嚇跑哈，腳踏實地加點毅力D3應(yīng)該也是可以上手的。

費話不多說，先上一張讓你逆天的數(shù)據(jù)可視化的效果圖，點我查看在線效果

D3.js基礎(chǔ)

了解SVG圖作圖

為什么要學(xué)習(xí)SVG圖呢？因為D3.js堪稱SVG中的jQuery，當(dāng)然你如果想用D3輸出Canvas圖也可以，但SVG圖操作起來更加靈活，更加方便調(diào)試，在Chrome中調(diào)試可以讓你飛起來。

學(xué)習(xí)D3.js的語法

語法是必需的，建議自行去官網(wǎng)上學(xué)習(xí)其語法，或者借/買一本書來同步學(xué)習(xí)，先嘗試實現(xiàn)簡單的圖形，如果可以的話最好了解一下函數(shù)式編程的curry與compose思想，不建議一開始就去接觸高大上的眾多在線Demo，這樣會容易讓你誤入深淵不能自拔，真的就從入門到放棄。

學(xué)習(xí)D3.js的編程思路

1)語法其實可以體現(xiàn)其編程思路，起步當(dāng)然是學(xué)習(xí)其強大的選擇器，下面感覺一下

d3.select("body").style("background-color", "black"); // 直接選擇 ->并設(shè)置屬性

d3.selectAll("p").style("color", function() { // 選擇 -> 動態(tài)設(shè)置屬性

return "hsl(" + Math.random() * 360 + ",100%,50%)";

});

d3.selectAll("p") // 選擇 -> 綁定數(shù)據(jù) -> 動態(tài)設(shè)置屬性

.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") // 直接把數(shù)據(jù)綁定到Dom并輸出，數(shù)組元素個數(shù)與p節(jié)點的個數(shù)一致就全部更新文本，如果不一致，就只更新現(xiàn)有p節(jié)點的文本，多余的數(shù)據(jù)會被保存起來，看下面會用到

.selectAll("p")

.data([4, 8, 15, 16, 23, 42])

.text(function(d) { return d; });

// Enter…[常用]

p.enter().append("p") // 如果不一致，數(shù)組元素個數(shù)比p節(jié)點多，就插入p節(jié)點補足并相應(yīng)更新文本

.text(function(d) { return d; });

// Exit…[常用]

p.exit().remove(); // 如果不一致，數(shù)組元素個數(shù)比p節(jié)點少，就刪除多余的p節(jié)點

3) 然后要學(xué)習(xí)D3的畫圖一般思路，比如要畫一個線狀圖，那么我們：

把輸入的原始數(shù)據(jù)轉(zhuǎn)化成為標(biāo)準(zhǔn)的D3可接受的數(shù)據(jù)格式 -> 根據(jù)原始數(shù)據(jù)定義好x軸函數(shù)、y軸函數(shù)和定義好作圖方式(如d3.line) -> 在SVG上面畫出x軸y軸、根據(jù)原始數(shù)據(jù)結(jié)合x軸及y軸函數(shù)作線狀圖 -> 再畫出標(biāo)題等細(xì)節(jié)的東西

4) 最后，給已經(jīng)完成的圖形添加動畫效果

沒有動畫效果的圖形看上去會比較乏味。動畫基本寫法如下：

// 把所有圓圈改變半徑

d3.selectAll("circle").transition() // 定義動畫

.duration(750) // 動畫持續(xù)時間

.delay(function(d, i) { return i * 10; }) // 元素動畫要延時多少時間開始

.attr("r", function(d) { return Math.sqrt(d * scale); }); // 設(shè)置最后效果

D3.js實戰(zhàn)項目

注意：下面代碼因為結(jié)合了React，javascript使用的是ES6，D3版本是最新的V4版，不熟悉的話自行惡補基礎(chǔ)。

一、D3實現(xiàn)簡單柱狀圖[在線demo][源代碼]

二、D3實現(xiàn)簡單簡單面積圖[在線demo][源代碼]

三、D3實現(xiàn)簡單簡單餅圖、圓環(huán)圖[在線demo][源代碼]

四、D3實現(xiàn)徑向堆棧柱狀圖[在線demo][源代碼]

五、D3實現(xiàn)簡單弦圖[在線demo][源代碼]

六、D3實現(xiàn)簡單打包圖[在線demo][源代碼]

七、D3實現(xiàn)雷達圖[在線demo][源代碼]

八、D3實現(xiàn)力導(dǎo)向圖[在線demo][源代碼]

九、D3實現(xiàn)中國地圖[在線demo][源代碼]

總結(jié)

以上是生活随笔為你收集整理的d3js mysql_D3.js入门指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。