text - D3、SVG 和 textPath : How to move the text down?

Question

我有一个图表，其中使用 textPath 沿着其中一个路径编写了一些文本。但是，我的问题是:我需要文本位于文本路径的另一侧，即位于其下方。

下面是一个例子:



我需要此处的文本位于纯蓝色区域内。也就是说，你可以真正阅读它。这里的蓝色弧线是 textPath。换句话说，我只想将文本向下移动约 20 像素。

真正让我困惑的是，我可以在文本上设置“x”属性并将其左右移动，但我无法设置“y”属性来上下移动它。

我想不通。任何人都可以帮忙吗？

这是我的代码

  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() })

Answer 1

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