Как я могу исправить наложение меток дуги в d3js?

Я рисую кольцевую диаграмму, используя 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

действительно ценю любую помощь.

Всего 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 , см. Скриншот ниже. Поэтому я не могу понять вашу проблему.

Стиль CSS применяется

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

  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);

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

Конечный результат

Вот последний стакблиц .


Есть идеи?

10000