D3，SVG和textPath：如何移动文本？ [英] D3, SVG and textPath: How to move the text down?

问题描述

我有一个图，其中一些文本沿着一个路径使用textPath编写。但是，我的问题是：我需要文本在文本路径的另一侧，即坐在它的下面。

I've got a diagram with some text written along one of the paths using a textPath. However, my problem is: I need the text to be on the other side of the text path, ie, sitting below it.

这里有一个例子：

我需要这里的文本在实心蓝色区域内。也就是说，你可以读它。这里的蓝色圆弧是textPath。换句话说，我只想将文本移动约20px。

I need the text here to be within the solid blue area. Ie, so you can actually read it. The blue arc here being the textPath. In other words, I just want to move the text down about 20px.

真让我困惑的是，我可以在文本上设置一个x属性它左右移动，但是我不能设置y属性来上移或下移。

Whats really confusing me, is that I can set an "x" property on the text and move it left and right , but I can't set a "y" property to move it up or down.

我无法弄清楚。

这是我的代码

  var labels = svg.selectAll("text.label")
      .data(partition.nodes(data))
     .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", 10)
      .attr("stroke","black")
      .style("background-color",'white')

    labels.append("textPath")
      .attr("xlink:href", function(d) { return '#' + d.name })
      .text(function(d) { return d.name.capitalize() })

推荐答案

您可以使用 dy 属性更改垂直对齐方式。

You can use the dy property to change the vertical alignment.

这篇关于D3，SVG和textPath：如何移动文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！