почему на моем графике d3 js p ie размыты метки ar c?

Question

У меня есть круговая диаграмма, нарисованная с использованием d3 js. к меткам ar c я применяю следующий стиль.

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

так выглядит моя диаграмма p ie. Вы можете видеть, что текстовые метки в процентах размыты (кажется, что другие стили css, примененные к родительским элементам, устанавливают непрозрачность для этих меток 0,5.)

Я пробовал это, но это не сработало.

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

проект доступен здесь. я ожидаю, что метки ar c должны отображаться в том же стиле, что и метки в центре текста кольцевой диаграммы.

https://stackblitz.com/edit/angular-6ufows

действительно ценю если вы можете помочь спасибо

Answer 1

Я исправил это, удалив opacity:0.5, который у вас есть на всех ваших <g> элементах, и применив непрозрачность к дугам paths, используя события мыши, также я переместил всплывающую подсказку немного выше, поскольку это усложняет задачу. для наведения дуги, вот рабочий stackblitz