一、需求
制定數(shù)據(jù)結(jié)構(gòu)，用餅圖可視化數(shù)據(jù)。
1.渲染餅圖并帶有順時(shí)針旋轉(zhuǎn)展示效果
2.鼠標(biāo)經(jīng)過每一項(xiàng)時(shí)，該項(xiàng)半徑變大，離開時(shí)恢復(fù)
3.鼠標(biāo)經(jīng)過在鼠標(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:['直接訪問','郵件銷售','聯(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ù)來源',
                radius:{
                    outerRadius:70,
                    innerRadius:0
                },
                center:{
                    x:100,
                    y:100
                },
                data:[
                    {value:10,data:'直接訪問'},
                    {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 是用來劃分每一項(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中間插入一些過度值，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