常規定義:
var width = 500,
height = 500;
var dataset = [30,10,43,55,13]
var color = d3.scale.category10()
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
var pie =d3.layout.pie()
拖拽函數的定義:
var drag = d3.behavior.drag()
.on("drag",dragmove)
function dragmove(d){
d.dx += d3.event.dx;
d.dy += d3.event.dy;
d3.select(this)
.attr("transform","translate("+ d.dx+","+ d.dy+")")
}//<span style="font-family: Arial, Helvetica, sans-serif;">偏移量=當前偏移量+拖拽偏移量</span>
繪製餅狀圖:
var outerRadius = width/4,
innerRadius = width/8;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
注意:這裏我們需要將餅狀圖的每一個區域都用g標籤包圍起來,這樣在做平移操作時只需要對各部分的g使用transform即可
var gAll = svg.append("g")
.attr("transform","translate("+outerRadius+","+outerRadius+")")
var arcs = gAll.selectAll("g")
.data(pie(dataset))
.enter()
.append("g")
.each(function (d) { //指定當前區域的偏移量,用於保存偏移量
d.dx = 0;
d.dy = 0;
})
.call(drag) //調用drag函數
arcs.append("path")
.attr("fill",function(d,i){return color(i)})
.attr("d", function (d) {
return arc(d)
})
//添加文字
arcs.append("text")
.attr("transform",function(d){
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor","middle")
.text(function(d){
return d.value;
});