一、需求
制定數(shù)據(jù)結(jié)構(gòu)，用餅圖可視化數(shù)據(jù)躏升。
1.渲染餅圖并帶有順時(shí)針旋轉(zhuǎn)展示效果
2.鼠標(biāo)經(jīng)過(guò)每一項(xiàng)時(shí)，該項(xiàng)半徑變大狼忱，離開時(shí)恢復(fù)
3.鼠標(biāo)經(jīng)過(guò)在鼠標(biāo)位置出現(xiàn)tip 框（我用backbone實(shí)現(xiàn)膨疏，不作為講解重點(diǎn)）
4.圖例legend
二、分析需求
1.需要的數(shù)據(jù)：
{ type 圖表類型 title 圖表名稱 legend 圖例數(shù)據(jù) tooltip 提示 durationTime 動(dòng)畫持續(xù)時(shí)間 series 圖表數(shù)據(jù) }
三钻弄、數(shù)據(jù)結(jié)構(gòu)
** 所有圖形的數(shù)據(jù)結(jié)構(gòu)都暫定為如下格式佃却，對(duì)于餅圖xAxis、yAxis則為null**
'pie':{
type:'pie',
title:{
text:'this is a demo' //圖標(biāo)名稱
},
legend:{
orient:'vertical',//horizontal||vertical 橫排或者豎排
x:300, //在svg中的位置
y:100,
width:16,
height:16,
padding:5,
// data:['直接訪問(wèn)','郵件銷售','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
tooltip:{
dataLabels:{
color:'#fff',
bgColor:'red'
}
},
durationTime:100, //動(dòng)畫的持續(xù)時(shí)間
xAxis:null, //x軸數(shù)據(jù)
yAxis:null, //y軸數(shù)據(jù)
series:{
title:'數(shù)據(jù)來(lái)源',
radius:{
outerRadius:70,
innerRadius:0
},
center:{
x:100,
y:100
},
data:[
{value:10,data:'直接訪問(wèn)'},
{value:20,data:'郵件銷售'},
{value:30,data:'聯(lián)盟廣告'},
{value:30,data:'視頻廣告'},
{value:30,data:'搜索引擎'}
]
}
}
四斧蜕、分解
1.渲染餅圖
2.添加動(dòng)畫
3.增加hover效果
3.渲染legend
五双霍、實(shí)現(xiàn)
1.渲染餅圖
在渲染餅圖時(shí)我們需要做：
1.1、用d3提供的 layout將數(shù)據(jù)轉(zhuǎn)換為pie所需要的數(shù)據(jù)格式
this._pie = d3.layout.pie()
.sort()
.value(function(d){
return d.value
})
.startAngle()
.endAngle()
sort:和js 中的sort方法一直批销，接受一個(gè)排序函數(shù)洒闸。不一樣之處為它的排序?qū)γ恳豁?xiàng)數(shù)據(jù)的startAngle和endAngle起作用。
value 是用來(lái)劃分每一項(xiàng)在圓環(huán)上所占的比例
startAngle和endAngle分別表示整個(gè)餅圖的起始弧度和終止弧度
1.2均芽、設(shè)置arc
this._arc = d3.svg.arc()
.innerRadius()
.outerRadius()
.padRadius()
.startAngle()
.endAngle()
我們可以想想一下：
但我們畫圓環(huán)時(shí)丘逸，是不是需要用svg 的path實(shí)現(xiàn)，path標(biāo)簽的d屬性時(shí)不時(shí)會(huì)很難掀宋，d3.svg.arc()可以根據(jù)pie轉(zhuǎn)換后的數(shù)據(jù)計(jì)算出d的取值深纲。
1.3、設(shè)置顏色構(gòu)造器
this._color = d3.scale.category20()
1.4劲妙、繪制
d3.svg.append('g')
.append('path)
.attr({
d:function(d,i){
return self._arc(d)
}
color:function(d,i){
return self._color(i)
}
})
上面演示了 arc 和color的用法
1.5湃鹊、動(dòng)畫
.transition()
.delay()
.duration()
.ease('linear')
.attrTween('d',function(d,i){
var fn = d3.interpolateObject({
endAngle:d.startAngle
},d)
return function(t){
return self._arc(fn(t))
}
})
為了制作連貫的動(dòng)畫，需要在startAngle和endAngle中間插入一些過(guò)度值镣奋，d3提供了interpolateObject（a,b）方法币呵，根據(jù)a,b在a,b之間插入中間值。
1.6侨颈、legend
legend制作的難點(diǎn)在于 如果將所有的圖例都水平排列余赢，如果確定每一個(gè)圖例的大小，由于svg 在繪制每一個(gè)元素時(shí)都是以左上角為起始哈垢，需要translate妻柒，因此我們需要獲得每一個(gè)圖例的寬度。
svg中的g類似與div 它的寬高為其內(nèi)容的寬高耘分，但是不能夠用$(div).width()獲得举塔，d3提供了這樣的方法绑警。
d3.select('g').getBBox().width
