SVG基礎(chǔ)
g標(biāo)簽
作用：將相關(guān)元素組合在一起的容器
<g transform="translate(175,175)">
<path fill="#d62728" d="M9.184850993605149e-15,-150A150,150 0 0,1 112.99004758056049,98.6572305902749L0,0Z"></path>
<text transform="translate(68.28120585906238,-31.0270354115946)" text-anchor="middle">55</text>
</g>
path標(biāo)簽
path標(biāo)簽可以說是svg中的精華所在，路徑元素就是通過定義一個段“路徑”萌壳，來繪制出各種圖形
路徑是很難計算的所以要用D3提供的生成器
M 移動到(moveTo) x,y 路徑起始點坐標(biāo)
Z 閉合路徑(closepath) 將路徑的開始和結(jié)束點用直線連接
L 直線(lineTo) x,y 當(dāng)前節(jié)點到指定(x,y)節(jié)點亦镶，直線連接
H 水平直線 x 保持當(dāng)前點的y坐標(biāo)不變，x軸移動到x, 形成水平線
V 垂直直線 y 保持當(dāng)前點的x坐標(biāo)不變袱瓮，y軸移動到y(tǒng), 形成垂直線
C 三次貝塞爾曲線curveTo（x1,y1,x2,y2,x,y）
S 平滑過渡曲線 smooth curveTo(cx,cy,x,y),s會自動補出一個對稱的控制點缤骨，一般和C命令一塊使用
Q 二次貝塞爾曲線(大寫是相對于moveTo 小寫相對于0 0)
以下是餅圖代碼
var svg = d3.select('#pie')
.append('svg');
//初始數(shù)據(jù)
var dataset = [ 30 , 10 , 43 , 55 , 13 , 10 , 5 , 8 , 22 ]; //初始數(shù)據(jù)
var color = d3.scale.category20(); //顏色標(biāo)尺
var pie = d3.layout.pie(),sum = 0,
piedata = pie(dataset);
var initData = pie(dataset);
piedata.forEach(function(d,i){
d._endAngle=d.endAngle;
d.endAngle=d.startAngle;
//d._endAngle2 = d.startAngle;
d.duration=2000*(d.data/d3.sum(dataset));//動畫時長2秒，計算每一個弧形所用動畫時間
d.delaytime=sum;
sum+=d.duration;
})
var arc = d3.svg.arc() //定義弧生成器
.outerRadius(150) //外半徑
.innerRadius(30); //內(nèi)半徑
//生成弧容器
var arcCon = svg.selectAll('g')
.data(piedata)
.enter()
.append('g')
.attr("transform","translate("+ 500 +","+ 300 +")");//整個圓的定位
//生成弧
arcCon.append('path')
.attr('d',function(d){ //此處函數(shù)中的數(shù)據(jù)d 來自arcCon中掛的數(shù)據(jù) piedata
return arc(d);
})
.attr('fill',function(d,i){
return color(i);
})
添加對應(yīng)文字
