Question

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

我希望将个别（元素）切片放在饼图外部，将饼图元素（切片）的其余部分放在通常的位置，如下所示：

这是我的代码：

<!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>

Answer 1

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

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

并且，在设置"d"属性时，选择要使用的弧生成器。例如，移动红色切片：

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

以下是您更改的代码：

<!DOCTYPE html>
<style>
  .arc text {
    text-anchor: middle;
  }
  
  .arc path {
    stroke: white;
  }

</style>

<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var data = [35, 20, 45];

    var width = 300,
      height = 300,
      radius = Math.min(width, height) / 2;


    var color = ["brown", "red", "blue"];

    var arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(50);
      
    var arc2 = d3.arc()
      .outerRadius(radius)
      .innerRadius(60);

    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", function(d,i){
      return i != 1 ? arc(d) : arc2(d);})
      .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>

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

1 个答案: