常規定義：

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