如何在 d3 中 transfrom/translate 文本元素？

Question

我正在尝试翻译我的 svg 文本（轴标签）以便我可以将它与 svg 容器居中。我试过这个代码：

svg.append("text")
  .attr("x", 100)
  .attr("y",100)
  .attr("transform", "translate(-50%, -50%)")
  .text("any text");

而且什么也没有发生。其他 svg 元素翻译没有问题，但是，文本不会从其原始位置移动。怎么了，翻译 svg 文本的正确方法是什么？

Answer 1

从传递给 translate 的参数中删除 % 符号：

svg.append("text")
  .attr("x", 100)
  .attr("y", 100)
  .attr("transform", "translate(-50, -50)")
  .text("any text");

您可以查看 MDN docs。

Answer 2

D3 Version 6 - Working Example with element

const fontSize = 1.714em;

innerCircleText.append('text')
.attr('text-anchor', 'middle')
.style('font-size', `${fontSize}em`)
.style('transform', `translate(0, ${0.5 / fontSize}em)`)
.text('24')

当字体的大小从中间移动一点时，这用于将文本稍微移近中心。

注意：如果我在这里省略了“em” .style('transform', translate(0, ${0.5 / fontSize}em))

浏览器不会使用它。但是，如果我保留它，并且 0 没有指标，这就是浏览器中显示的内容...... 变换：平移（0px，0.291715em）

转换工作...

如何在 d3 中 transfrom/translate 文本元素？

How to transfrom/translate text element in d3?

svg

transform

translate

d3.js