如何修复 d3js 中重叠的弧形标签？

Question

我正在使用 d3js 绘制圆环图。

我有几个问题

1) 圆弧标签重叠在圆弧上。知道如何解决吗？

2) 我正在应用样式类 pieChartOuterLabel 的弧形标签，但它没有被应用。

.pieChartOuterLabel {
  font-size: 1em;
  fill: black;
  font-weight: bold;
  font-family: 'Times New Roman, Times, serif';
}

3) 如何对齐图表中心的文本居中对齐？

该项目在堆栈闪电战中可用。

https://angular-dbcqpg.stackblitz.io/

代码也可以在

https://stackblitz.com/edit/angular-dbcqpg

非常感谢任何帮助。

Answer 1

让我们一一回答您的问题。

1. 要调整标签，请在转换中为文本创建更具创意的函数，如下所示。

  .attr("transform", function(d) { 
    let labelcoords = labelArc.centroid(d); // retrieve the label coords
    let offset = 6; // distance by which you want the labels to move out
    //now get the new label coords by running a function on them
    labelcoords[0] = adjustLabelCoords(labelcoords[0]);
    labelcoords[1] = adjustLabelCoords(labelcoords[1]);
    //This function checks if the coords are negative or positive and applies the offset
    function adjustLabelCoords(coord) {
      if (coord < 0) {
        coord = coord - offset; //if coord is negative, apply a negative offset to move more left or up
      } else if (coord > 0) {
        coord = coord + offset; //if coord is positive, apply a positive offset to move right or down
      }
      return coord;
    }
    return "translate(" + labelcoords + ")"; }
  )

1. 正在应用.pieChartOuterLabel 类，请参见下面的屏幕截图。所以我无法理解你的问题。

您可以看到该类已正确应用于文本。

1. 您的文本已经使用text-anchor="middle" 属性居中对齐。我想你希望它也垂直居中。为此，您可以执行以下操作：

将您的 svgTextLabel 更改为：

        svgTxtLabel
          .attr("text-anchor", "middle")
          .attr("font-size", (labelSize)+'em')
          .attr("transform", `translate(0,-10)`)
          //.attr("dy", '-1.5em')
          .attr("class","pieChartCenterTextLabel")
          .transition().delay(2000)
          .text("Total");

和你的 svgTxtValue 到：

 let svgTxtValue =   svg.append("text");
      svgTxtValue
        .attr("text-anchor", "middle")
        .attr("font-size", (valueSize)+'em')
        .attr("transform", "translate(0,10)")
        .attr("class","pieChartCenterTextLabel")
        .transition().delay(2000)
        .text(total);

所有这些都会产生：

这是最后的stackblitz。