饼图的标签文本没有出现

Question

无论我尝试什么（重置半径、更改文本颜色），我的饼图上的标签都不可见。饼图本身是可见的。我看了很多例子，比如https://bl.ocks.org/santi698/f3685ca8a1a7f5be1967f39f367437c0，但是没有用。一定有一些简单的东西我遗漏了，可能在质心函数中。任何帮助，将不胜感激！代码如下。它是神社模板的一部分，但我想这不相关。显然 arcs.append("text") 语句在某处有错误。

<svg width="960" height="500">
</svg>
<script>
    var svg = d3.select("svg");

    var margin = 50,
        width = +svg.attr("width") - margin,
        height = +svg.attr("height") - margin,
        radius = height / 2;

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

    data = [{fruit: "apple", amount: 3},
            {fruit: "pear", amount: 2},
            {fruit: "kiwi", amount: 5}];
    console.log(data);

    var colors = ['green', 'red', 'blue'];

    var arc = d3.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

    var labelArc = d3.arc()
        .outerRadius(radius - 40)
        .innerRadius(radius - 40);

    var pie = d3.pie()
        .value(function(d) { return d.amount; });
    console.log(pie(data))

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

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

    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + labelArc.centroid(d) + ")";
        })
        .text(function(d) {
            return d.fruit;
        });
</script>

Answer 1

D3 pie generator returns 具有多个已创建属性的对象数组，其中：

data - the input datum; the corresponding element in the input data array.

因此，应该是：

.text(function(d) {
    return d.data.fruit;
});

这里是你的代码有那个变化：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="960" height="500">
</svg>
<script>
  var svg = d3.select("svg");

  var margin = 50,
    width = +svg.attr("width") - margin,
    height = +svg.attr("height") - margin,
    radius = height / 2;

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

  data = [{
      fruit: "apple",
      amount: 3
    },
    {
      fruit: "pear",
      amount: 2
    },
    {
      fruit: "kiwi",
      amount: 5
    }
  ];

  var colors = ['green', 'red', 'blue'];

  var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

  var labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

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

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

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

  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + labelArc.centroid(d) + ")";
    })
    .text(function(d) {
      return d.data.fruit;
    });
</script>

饼图的标签文本没有出现

Label text of pie chart not appearing

javascript

d3.js

pie-chart