Текст метки круговой диаграммы не отображается

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 круговой генератор возвращает массив объектов с несколькими созданными свойствами, среди которых:

data - входные данные;соответствующий элемент во входном массиве данных.

Следовательно, оно должно быть:

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