d3.js——饼状图的拖拽

来源：互联网发布：jira 7.2.2下载 linux 编辑：程序博客网时间：2024/06/06 16:54

常规定义：

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

0 0