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返回具有多个已创建属性的对象数组：

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>

饼图的标签文本未显示

1 个答案: