D3: Как определить текст ответственности?

Question

Я новичок ie с D3, и я не знаю, почему якорь текста не работает правильно. Я разработал несколько гистограммы. И текст, который я помещаю над каждой полосой, не появляется в середине полосы. Это происходит с Firefox и Chrome, но с небольшой разницей между ними.

Код, выполняемый для установки текста в середине строки, одинаков:

bar
  .selectAll("text")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("text")
  .attr("text-anchor", "middle")
  .attr("class", "label-half-donut")
  .attr("x", function(d, i) {
    return scales.x1Scale.bandwidth() * (i + 0.5);
  })
  .attr("y", function(d, i) {
    return scales.yScale(d.value) - 5;
  })
  .text(function(d) {
    return lang === "es" ? String(d.value).replace(".", ",") + "%" : d.value + "%";
  });

Применяется следующий стиль:

  .label-half-donut {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    fill: rgb(255, 255, 255);
  }

In Firefox, как вы можете видеть, текст над столбцами находится не посередине:

И если мы проверим код в консоли Firefox, мы получили их для первых двух столбцов:

<text text-anchor="middle" class="label-half-donut" x="45" y="55">80,00%</text>
<text text-anchor="middle" class="label-half-donut" x="135" y="27">89,47%</text>

Как вы можете видеть, атрибут "text-anchor" определен, но не работает в Firefox.

В Chrome происходит то же самое, но с небольшой разницей. Вот скриншот, где вы можете видеть, что текст находится не в середине панели.

Как вы можете видеть ширину графиков c немного больше, чем в Firefox. Таким образом, это может быть причиной того, почему позиция текста не равна, чем в Firefox. Но, несмотря на это, текст по-прежнему не центрирован.

Здесь вы можете увидеть код, который мы получили в Chrome console:

<text text-anchor="middle" class="label-half-donut" x="59.5" y="55">80,00%</text>
<text text-anchor="middle" class="label-half-donut" x="178.5" y="27">89,47%</text>

В этом коде, Как и раньше, есть атрибут «привязка текста», но он работает неправильно.

Есть ли способ правильно отцентрировать текст независимо от веб-браузера и его ширины? Существует ли возможность сделать этот текст "ответственным"? Я что-то не так делаю, когда определяю текст на гистограмме?

РЕДАКТИРОВАТЬ I:

Вот вам пример кода:

Но здесь текст правильно центрирован, а не в моем веб-приложении, где код точно такой же.

Answer 1

Для кода, который работает в CodeSandbox и не работает в вашем приложении, из предыдущего опыта это могут быть унаследованные CSS свойства. В вашем случае ваши текстовые метки приобретают большинство свойств из .label-half-donut, однако он получает свойство text-align из другого места.

Поэтому я предлагаю попробовать добавить это к вашему .label-half-donut и добавить text-anchor: middle, а также отказоустойчивый

.label-half-donut {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    fill: rgb(255, 255, 255);
    text-align: end;
    text-anchor: middle;
}