如何使用 d3.js 使文本在 svg 图像上居中？答案

【问题标题】：How to center a text on a svg image using d3.js?如何使用 d3.js 使文本在 svg 图像上居中？
【发布时间】：2018-09-06 14:08:07
【问题描述】：

我正在尝试放置一个文本，使其位于我的元素的中心，如下图所示：

我希望根据我的图像大小动态完成此操作。

我该怎么做？

  <body>
  <script type="text/javascript">
    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);
    var widthMarker=50;
    var img = svg.append("svg:image")
        .attr("xlink:href", "marker.svg")
        .attr("width", widthMarker)
        .attr("height", widthMarker)
        .attr("x", 228)
        .attr("y",53);

        svg.append("text").attr("width",100).attr("height",100).text("hello world");



  </script>
  </body>

http://plnkr.co/edit/39zEvnjOmotZXYF2GFwq?p=preview

【问题讨论】：

你看到了吗？ stackoverflow.com/questions/36268318/…。你可以试试 tspan, text-anchor middle

标签： javascript d3.js

【解决方案1】：

您可以简单地将图像和文本放在一个组容器中，并相对调整文本位置，如下所示。

Plunker

const svg = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var widthMarker = 50;

var imgContainer = svg.append("g")
  .attr("transform", "translate(228,53)");

var img = imgContainer.append("svg:image")
  .attr("xlink:href", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgfLDf_0gBVxWp_7ec2UR3Dro5rBXquElgRdSH6K8LQQ7QanSQ")
  .attr("width", widthMarker)
  .attr("height", widthMarker);

var text = imgContainer.append("svg:text")
  .attr("dy", widthMarker/2)
  .text("hello world");

text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2);

&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;

【讨论】：

太棒了！非常感谢，只有一个问题，我如何检测文本是否在记分板上？在这种情况下，它被退出，因为它是一个长文本。
如果(widthMarker - text.node().getComputedTextLength()) 为负数，则文本比标记宽。检查最后一行代码。