Javascript D3.js：标签放错位置 我是D3.JS的新手，我试着创建一个半甜圈图并把标签放在每个圆弧的中间。< /P>

我用CodeSandbox做了一个开发人员，效果很好。标签放置正确，但当我将该代码带到web应用程序的代码中时。代码完全相同。这些标签放错地方了，我不知道为什么：(

这两个代码之间的唯一区别是，第一个屏幕帽的代码位于引导的“Col”内，而第二个屏幕帽的代码与您在CodeSandBox中看到的不同

在这里，您可以在我的web应用程序中看到半圈油炸圈饼图表的屏幕盖：

正如您所看到的，当CodeSandbox中的相同代码正常工作时，每个拱门的标签和右侧图例的标签都放错了位置。请将所有标签放在正确的位置。如您在本屏幕帽中所看到的：

为什么会发生这种情况？我如何才能使标签在两个开发项目中都正确放置

你可以在这个CodeSandoox中看到我的半圈面包圈图表的所有代码

编辑I:

我在代码中创建了一个跟踪，以了解web浏览器的值

下面是我将标签置于圆弧中心的代码：

//We center the text inside the arc
arcs
  .append("svg:text")
  .attr("transform", function(d) {
    var textWidth = getTextWidth(
      (d.value.toFixed(2) + "%").toString(),
      "Roboto"
    );
    console.log(
      "d.value: " +
        d.value +
        " textWidth: " +
        textWidth +
        " arc.centroid(d)[0]: " +
        arc.centroid(d)[0]
    );
    return (
      "translate(" +
      (arc.centroid(d)[0] - textWidth) +
      "," +
      arc.centroid(d)[1] +
      ")"
    );
  })
  .attr("class", "label-half-donut")
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) {
    // are we past the center?
    return (d.endAngle + d.startAngle) / 2 > Math.PI ? "end" : "start";
  })
  .text(function(d) {
    return d.value.toFixed(2) + "%";
  });

您可以在CodeSandBox按钮中找到所有代码

CodeSandBox的代码我用Chrome运行它，我得到了这个图形

Chrome中返回的值为：

d.value: 13.13 textWidth: 33.916015625 arc.centroid(d)[0]: -86.00117936328948

构建弧的标记如下所示：

<g class="slice">
    <path fill="#17A2B8" d="M-124.99275003141527,-1.3462687637091173A125,125,0,0,1,-116.9896333088247,-44.02755612416768L-47.07429579530035,-16.85261627690394A50,50,0,0,0,-49.98187231803007,-1.3462687637091153Z"></path>
    <text transform="translate(-119.91719498828948,-16.12597743156403)" class="label-half-donut" dy=".35em" text-anchor="start">13.13%</text>
</g>

构建弧的标记是：

<g class="slice">
    <path fill="#17A2B8" d="M-124.99275003141527,-1.3462687637091173A125,125,0,0,1,-116.9896333088247,-44.02755612416768L-47.07429579530035,-16.85261627690394A50,50,0,0,0,-49.98187231803007,-1.3462687637091153Z"></path>
    <text transform="translate(-124.15118088916839,-16.12597743156403)" class="label-half-donut" dy=".35em" text-anchor="start">13.13%</text>
</g>

Chrome

d.value: 13.13 textWidth: 33.916015625 arc.centroid(d)[0]: -86.00117936328948
d.value: 59.7 textWidth: 33.916015625 arc.centroid(d)[0]: -33.49019847517988
d.value: 23.88 textWidth: 33.916015625 arc.centroid(d)[0]: 59.22461768695275
d.value: 17.91 textWidth: 33.916015625 arc.centroid(d)[0]: 84.79723004914864

---

未正确计算文本的翻译。转换上的

x

值应为

arc.centroid（d）[0]-textWidth/2

因此，您的转换应该如下所示：

      .attr("transform", function(d) {
        var textWidth = getTextWidth(
          (d.value.toFixed(2) + "%").toString(),
          "Roboto"
        );
        console.log(
          "d.value: " +
            d.value +
            " textWidth: " +
            textWidth +
            " arc.centroid(d)[0]: " +
            arc.centroid(d)[0]
        );
        let x = arc.centroid(d)[0] - textWidth / 2;
        let y = arc.centroid(d)[1];
        return "translate(" + x + "," + y + ")";
      })

Firefox开发者版v75.0b：

铬v80.0.3987.149：

更新

d.value: 13.13 textWidth: 33.916015625 arc.centroid(d)[0]: -86.00117936328948
d.value: 59.7 textWidth: 33.916015625 arc.centroid(d)[0]: -33.49019847517988
d.value: 23.88 textWidth: 33.916015625 arc.centroid(d)[0]: 59.22461768695275
d.value: 17.91 textWidth: 33.916015625 arc.centroid(d)[0]: 84.79723004914864

---

与OP讨论后，他们的工作区仍然存在问题。我们进一步调查发现，问题是由字体系列的继承样式引起的，而

textWidth

的计算是为

Roboto

字体系列进行的。为了解决此问题，我们将样式添加为

.style(“字体系列”、“Roboto”、“sans serif”）

添加到标签文本。这解决了问题和工作。

Hello@JoseCarlos，如果您愿意共享web应用程序链接或其他平台（尝试使用JSFIDLE或stackblitz），这将非常有帮助这个错误将发生在哪里，我们可以看到到底发生了什么。您是否使用web浏览器的DOM检查器检查

文本
节点的应用CSS样式及其计算位置？嗨@Mehdi！！！我将检查它并告诉您一些事情！！！谢谢您的帮助！！！嗨@Mehdi！！！我已经更新了我的original post提供了一些值。此外，我检查了在Chrome中运行的web应用程序返回的图形和值是否与在Firefox中运行的web应用程序返回的图形和值相同。它只在Firefox中运行。Chrome不起作用。老实说，我不知道会发生什么：（.我将用结果更新我的原始帖子。嗨，Jose。对我来说，它在chrome和firefox中都能工作。我在上面添加了屏幕截图。因此我无法重现你的问题。这个问题现在只出现在你的应用程序中，还是也出现在codesandbox中？嗨@Coola！！！对我来说，你的解决方案在firefox和chrome中都很好，但在我的应用程序中，textWidth在Chrome和Firefox中有不同的值，我不知道为什么会发生这种情况？可能会发生的一件事是，标签继承了样式字体系列。但是，您只计算Roboto的样式。尝试应用
.style（“字体系列”，“Roboto”，“无衬线”）
使用d3js编辑文本。检查这个OMG！！！它很有效！！！非常感谢您的努力和帮助！！！！
      .attr("transform", function(d) {
        var textWidth = getTextWidth(
          (d.value.toFixed(2) + "%").toString(),
          "Roboto"
        );
        console.log(
          "d.value: " +
            d.value +
            " textWidth: " +
            textWidth +
            " arc.centroid(d)[0]: " +
            arc.centroid(d)[0]
        );
        let x = arc.centroid(d)[0] - textWidth / 2;
        let y = arc.centroid(d)[1];
        return "translate(" + x + "," + y + ")";
      })