D3學(xué)習(xí)例子の做一個(gè)簡單圖表
數(shù)據(jù)為什么需要可視化换怖，舉個(gè)例子在一組數(shù)字中很少有人可以在極短的時(shí)間內(nèi)找出其中最大的值绅你，但是絕對有很多人能在很多的柱狀圖中找到最高的那一個(gè)扔涧。
這就是數(shù)據(jù)可視化的好處滞乙，能幫助人們快速的篩選信息以及有更加美觀友好的展示方式蚓聘。
以下是一些概念：
畫布
HTML 5 提供兩種強(qiáng)有力的“畫布”：SVG 和 Canvas。
svg
svg 是可縮放矢量圖形
有以下特點(diǎn)
1京髓、SVG 繪制的是矢量圖航缀，因此對圖像進(jìn)行放大不會(huì)失真
2、基于 XML堰怨，可以為每個(gè)元素添加 JavaScript 事件處理器
3谬盐、每個(gè)圖形均視為對象，更改對象的屬性诚些，圖形也會(huì)改變
4、不適合游戲應(yīng)用
Canvas
Canvas 是通過 JavaScript 來繪制 2D 圖形皇型，是 HTML 5 中新增的元素诬烹。
有以下特點(diǎn)：
1、繪制的是位圖弃鸦，圖像放大后會(huì)失真
2绞吁、不支持事件處理器
3、能夠以 .png 或 .jpg 格式保存圖像
4唬格、適合游戲應(yīng)用
PS：d3中提供了眾多的svg圖形生成器家破。因此，建議使用svg畫布
邪惡的分割線 以下為一些使用技巧
如何生成跟集合或數(shù)組相同數(shù)量的圖形
svg.selectAll("rect") //選擇svg內(nèi)所有的矩形
.data(dataset) //綁定數(shù)組
.enter() //返回返回缺失元素的占位對象 购岗，指向綁定數(shù)據(jù)中比選定元素集多出的一部分元素
.append("rect") //添加足夠數(shù)量的矩形元素
以下為生成圖表的例子
html:
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
<svg id="scale" width="400" height="300"></svg>
js:
var svg = d3.select("#scale")
.append("svg");
var dataset = [1.2,2.3,0.9,1.5,3.3];
var rectHeight = 25;
//畫布周邊的空白
var padding = {left:20, right:30, top:20, bottom:20};
var max = d3.max(dataset);
/**
* 概念（數(shù)學(xué)求一元函數(shù)時(shí) x與y 當(dāng)知道 x【定義域】的值時(shí) 就能確定y【值域】的值）
* d3.scale.linear 的返回值可以當(dāng)成函數(shù)使用
*/
var linear = d3.scale.linear() //返回一個(gè)線性比例尺
.domain([0,max]) //設(shè)定比例尺的定義域
.range([0,300]); //設(shè)定比例尺的值域
var totalHeight = 0;
svg.selectAll('rect')
.data(dataset)
.enter() //返回缺失元素的占位對象汰聋，指向綁定數(shù)據(jù)中比選定元素集多出的一部分元素
.append('rect')
.attr("x",padding.left)
.style('color',"#fff")
.attr("y",function(d,i){
totalHeight = (i+1)* rectHeight;
return i * rectHeight;
})
.attr("width",function(d){
return linear(d); //調(diào)用比例尺
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
var xAxis = d3.svg.axis()//添加橫向坐標(biāo)
.scale(linear)
.orient("bottom");
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + totalHeight + ")")
.call(xAxis); //為當(dāng)前選擇的元素集調(diào)用指定函數(shù)
效果：
圖1
style
.axis path,
.axis line{
fill: none; /*填充*/
stroke: black;
shape-rendering: crispEdges; /*讓線條更明顯*/
}
美化后如下圖：
Paste_Image.png
