d3.js——饼状图的拖拽

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;
});