Question

我正在看这个jsfiddle。当我将标签添加到饼图时，第一个标签出现在图表后面，而其余标签则添加到图表顶部。您在示例中看到标签的唯一原因是因为我已将fill-opacity: .8添加到图表中。

我认为问题出现在这段代码中：

pieLabels.enter()
  .append("text");

pieLabels.attr("class", "pie_labels")
  .attr("transform", function (d, i) {
    d.outerRadius = rad + 200;
    d.innerRdius = (rad + 200) / 2;

    var c = arc.centroid(d);
    var x = c[0] + rad - t;
    var y = c[1] + rad - t;
    return "translate(" + x + "," + y + ")rotate(" + angle(d) + ")";
  })
  .attr("text-anchor", "middle")
  .text(function (d, i) {
    return d.data.key + ': ' + d.data.value;
  });

pieLabels.exit()
  .remove();

有没有办法添加标签以确保它们出现在我的饼图上？

Answer 1

您看到了这一点，因为在您的initPieChart函数中，您附加了一个文本元素。因此，后续.selectAll()将选择此现有元素并进行更改。实际的饼段将附加在该单个文本元素之后，因此会重叠它。

您可以通过删除在init函数中附加单个文本元素的行来轻松解决此问题。完成jsfiddle here。

Answer 2

这是因为你在饼图本身之前附加了文本，svg文件的创建发生在图层上，所以首先写的东西会先写入其他内容，所以你必须在饼图渲染到之后移动文本把它放在首位。 ~~或者您可以设置文本的z-index，它也应该有效。~~

为什么我的第一个标签出现在我的饼图后面？

2 个答案: