D3,SVG和textPath:如何将文本向下移动？

Question

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

这是一个例子:

我需要这里的文字在纯蓝色区域内.即,所以你可以真正阅读它.这里的蓝色弧是textPath.换句话说,我只想将文本向下移动大约20px.

真的让我感到困惑的是,我可以在文本上设置"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属性更改垂直对齐方式.