d3.js——饼状图的拖拽_d3饼图拖拽-优快云博客

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/51363181

本文详细介绍了如何利用d3.js库创建可拖拽的饼状图。通过设置outerRadius和innerRadius调整图形大小，结合drag行为事件，实现了饼图扇区的动态拖动效果，增强了交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常规定义：

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