D3.js學習筆記（一）
D3.js學習資源：
http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 極客學院關於D3.js的系列文章；
http://www.ourd3js.com/wordpress/
D3 3.x版本API:https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
D3 4.x版本API：https://github.com/d3/d3/blob/master/API.md
3.x和4.x版本差別很大；
網上個人關於D3的部落格：http://www.iampua.com/pui/ant-admin.html#/（示例）
https://www.cnblogs.com/fastmover/p/7779660.html 有例子可供下載
一、基本介紹
D3.js是基於資料驅動的java script資料視覺化工具，藉助 Html5提供的SVG、Canvas實現資料展示；
D3.js採用類似於JQuery的鏈式語法，選擇和操縱資料都非常的方便，示例如下：
<html> <head> <meta charset="utf-8"> <title>HelloWorld</title> </head> <body> <p>Hello World 1</p> <p>Hello World 2</p> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> var p=d3.select("body").selectAll("p"); p.text("www.ourd3js.com"); p.style("color","red");
p.style("font-size","72px");
//=======等價於如下鏈式語法：=======================================
//d3.select("body").selectAll("p").text("www.ourd3js.com").style("color","red").style("font-size","72px");
</script>
</body>
</html>二、D3.js的元素選擇
1、D3.js選擇器允許選擇元素、元素樣式、設定元素屬性
1）選擇元素
d3.selectAll("p") //按元素名稱選擇全部元素
d3.select("body")//按元素名稱選擇指定元素
d3.select(".class")//選擇指定的類
d3.select("#id") //按id選擇元素
d3.select("body").select("p") //選擇body中第一個P元素
三、資料繫結
d3中可以繫結到單個數據物件，也可以繫結到陣列物件
實現頁面中所有段落繫結到特定的字串程式碼如下：
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str); //datum 繫結html元素到一個數據物件,注意繫結到內容不代表P的文字顯示繫結資料
p.text(function(d, i){
return "第 "+ i + " 個元素繫結的資料是 " + d;
}); //通過函式設定P內容，內容返回 P的序列號及繫結內容資訊繫結到陣列示例程式碼如下：
var dataset = ["I like dogs","I like cats","I like snakes"]
var body = d3.select("body");
var p = body.selectAll("p");
//===============通過函式data繫結到陣列==================
p.data(dataset)
.text(function(d, i){
return d;
});;四、元素插入、刪除以及樣式與屬性設定
var width = 300; //畫布的寬度
var height = 300; //畫布的高度
svg = d3.select("body").append("svg") //新增一個svg元素
.attr("width", width) //設定寬度
.attr("height", height); //設定高度
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
svg.selectAll("rect")
.data(dataset)
.enter() //====如果資料沒有繫結到元素則建立佔位元素，當append時建立實際元素
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d);
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue"); //設定屬性，屬性與svg對應
五、比例尺
比例尺建立實際資料與影象繪製資料之間的比例關係，d3提供了多種比例尺型別：線性比例尺（將一個連續的區間，對映到另一區間）、序數比例尺（值離散的，線性比例尺不適合，需要用到序數比例尺）
線性比例尺示例：
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scale.linear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300序數比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black線性比例尺應用示例：
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
var linear = d3.scale.linear() //==========線性比例尺============
.domain([0, d3.max(dataset)]) //==============實際資料================
.range([0, 350]); //===============繪圖資料（根據實際資料與比例尺範圍，自動建立繪圖資料）====================
svg = d3.select("body").append("svg") //新增一個svg元素
.attr("width", width) //設定寬度
.attr("height", height); //設定高度
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d); //返回比例尺中的資料
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");六、座標軸
在繪製柱狀圖、曲線圖時常常需要繪製座標軸，在D3中已經將座標軸實現為元件，柱狀圖實現示例：
d3.drawAxis = function ()
{
var width = 300; //畫布的寬度
var height = 300; //畫布的高度
svg = d3.select("body").select("svg");
//選擇文件中的body元素
if (svg == undefined)
{
svg = d3.select("body").append("svg") //新增一個svg元素
.attr("width", width) //設定寬度
.attr("height", height); //設定高度
}
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
//==================定義比例尺=======================
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 350]);
var rectHeight = 25; //每個矩形所佔的畫素高度(包括空白)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d); //=============獲取比例尺資料================
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");
//===============建立座標軸元件，設定元件的相關屬性========================
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(8); //指定刻度的數量
//==================call的作用是：在呼叫函式axis時，將新增的svg 組物件屬性
//svg.append("g").attr("class", "axis").attr("transform", "translate(200,200)")作為axis函式的呼叫引數=================
//attr("transform", "translate(200,200)")表示平行移動座標軸的位置x、y分量；
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(200,180)")
.call(axis);
}繪製完成的圖如下示意：
