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

Question

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

我有几个问题

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

2) 我正在应用样式 class 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

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

要调整标签，请像这样在文本转换中创建更具创意的功能。

  .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 + ")"; }
  )

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

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

您的文本已使用 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.

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

How can i fix arc labels overlapping in d3js?

html

css

d3.js

angular5