Как я могу исправить наложение меток ar c в d3 js?

Question

Я рисую кольцевую диаграмму, используя d3 js.

У меня есть несколько проблем

1) ar c надписывается на круге над ar c. Любая идея, как я могу это исправить?

2) метки ar c Я применяю класс стиля 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 + ")"; }
  )

Применяется класс .pieChartOuterLabel, см. Скриншот ниже. Поэтому я не могу понять вашу проблему.

Вы видите, что класс правильно применяется к тексту.

Ваш текст уже выровнен по центру с использованием атрибута 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);

Все это производит :

Вот окончательный стек-блиц .