使用d3.js移动饼图的一部分_D3.js

使用d3.js移动饼图的一部分

d3.js

使用d3.js移动饼图的一部分,d3.js,D3.js,在下面的代码中，创建了一个简单的饼图，但我无法在选中时将一个切片移到图表的外侧我希望单个（元素）切片位于饼图的外部，其余饼图元素（切片）位于其通常的位置，如下所示：这是我的密码： <!DOCTYPE html> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var data = [35, 20, 45]; v

在下面的代码中，创建了一个简单的饼图，但我无法在选中时将一个切片移到图表的外侧

我希望单个（元素）切片位于饼图的外部，其余饼图元素（切片）位于其通常的位置，如下所示：

这是我的密码：

<!DOCTYPE html>


<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var data = [35, 20, 45];

    var width = 300,
      height = 300,
      radius = 150;

    var arc = d3.arc()
      .outerRadius(130);

    var arcLabel = d3.arc()
      .outerRadius(radius - 30)
      .innerRadius(radius - 20);


    var pie = d3.pie()
      .value(function(d) {
        return d;
      });


    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


    var emptyPies = svg.selectAll(".arc")
      .data(pie(data))
      .enter()
      .append("g")
      .attr("class", "arc")



    emptyPies.append("path")
      .attr("d", arc)
      .style("fill", function(d, i) {
        return color[i];
      })


    emptyPies.append("text")
      .attr("transform", function(d) {
        return "translate(" + arcLabel.centroid(d) + ")";
      })
      .text(function(d) {
        return d.data;
      });

  </script>


var数据=[35,20,45]；
可变宽度=300，
高度=300，
半径=150；
var arc=d3.arc（）
.外层（130）；
var arcLabel=d3.arc（）
.外层（半径-30）
.内半径（半径-20）；
var pie=d3.pie（）
.价值（功能（d）{
返回d；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var emptyPies=svg.selectAll（“.arc”）
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
emptyPies.append（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d，i）{
返回颜色[i]；
})
emptyPies.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+arcLabel.centroid（d）+”）；
})
.文本（功能（d）{
返回数据；
});

一个简单的解决方案是创建一个不同的电弧发生器：

var arc2 = d3.arc()
    .outerRadius(radius)
    .innerRadius(60);

设置

“d”

属性时，选择要使用的电弧发生器。例如，移动红色切片：

emptyPies.append("path")
    .attr("d", function(d,i){
        return i != 1 ? arc(d) : arc2(d);
})

以下是更改后的代码：


.arc文本{
文本锚定：中间；
}
.弧形路径{
笔画：白色；
}
var数据=[35,20,45]；
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=[“棕色”、“红色”、“蓝色”]；
var arc=d3.arc（）
.外层（半径-10）
.内半径（50）；
var arc2=d3.arc（）
.外部（半径）
.内半径（60）；
var arcLabel=d3.arc（）
.外层（半径-30）
.内半径（半径-20）；
var pie=d3.pie（）
.价值（功能（d）{
返回d；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var emptyPies=svg.selectAll（“.arc”）
.数据（pie（数据））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）
emptyPies.append（“路径”）
.attr（“d”，函数（d，i）{
返回i！=1弧（d）：弧2（d）；}）
.样式（“填充”，功能（d，i）{
返回颜色[i]；
})
emptyPies.append（“文本”）
.attr（“转换”，函数（d）{
返回“平移（“+arcLabel.centroid（d）+”）；
})
.文本（功能（d）{
返回数据；
});

请解释一下“移动”是什么意思。好的，我明白了。。。但是在

鼠标上方的上，编程时，只有一片。。。另外，不要在评论中解释：改为编辑你的问题。还有一件事，正如你在图片中看到的，移动的切片和原始切片之间有很长的差距。你能在代码中也更新吗？这是另一个问题，因为你有一个甜甜圈图，而不是饼图，而且改变innerRadius
是不可能的，所以，我建议你发布另一个问题。