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

【问题标题】：Why does my first label show up behind my pie chart?为什么我的第一个标签会出现在我的饼图后面？
【发布时间】：2013-12-02 19:24:29
【问题描述】：

我正在看这个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();

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

【问题讨论】：

标签： javascript d3.js pie-chart

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是因为您将文本附加到饼图本身之前，svg 文件的创建发生在图层上，因此首先编写的内容在其他内容之前绘制，因此您必须在饼图呈现后移动文本把它放在上面。 ~~或者你可以设置文本的z-index，它应该也可以。~~

【讨论】：