Javascript D3：如何定义责任文本？

我是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);
  }

<强> 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>

80,00%
89,47%

正如您所见，“文本锚定”属性已定义，但在Firefox中不起作用

在Chrome中，情况相同，但略有不同。这里有一个屏幕扫描，你可以看到文本不在中间。< /P>

正如您所看到的，图形的宽度比Firefox中的要大一点。因此，这可能是为什么文本的位置不等于Firefox中的位置的原因。但是，尽管如此，文本仍然没有居中

在这里，您可以看到我们在Chrome控制台中获得的代码：

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

80,00%
89,47%

在这段代码中，与前面一样，有一个属性“text-anchor”，但它不能正常工作

是否有任何方法可以使文本正确居中，而不受web浏览器及其宽度的影响？是否有可能使该文本成为“责任”？ 当我在条形图上定义文本时，我是不是做错了什么

编辑I:

这里有一个代码示例：

---

但是在这里，文本正确居中，而不是在代码完全相同的web应用程序中。

对于在CodeSandbox中工作而在应用程序中不工作的代码，根据以前的经验，它可能是继承的CSS属性。在您的情况下，文本标签从

获取大多数属性。标签半圈面包圈

，但它从其他地方获取

文本对齐

属性

因此，我建议尝试将其添加到您的.label half donut中，并添加

文本锚定：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;
}

---

您是否介意提供一个完整的示例，包括定位条的代码？一个堆栈片段将非常适合于此。嗨@Mehdi！！！我已经更新了我原来的帖子。天哪！！！它工作！！！谢谢你的帮助！！！你救了我两次！！！：）下一次，我将检查是否有任何继承的CSS属性使我的开发无法正常工作！！！谢谢