D3、SVG 和 textPath：如何将文本下移？答案

【问题标题】：D3, SVG and textPath: How to move the text down?D3、SVG 和 textPath：如何将文本下移？
【发布时间】：2013-04-21 04:52:36
【问题描述】：

我有一个图表，其中包含一些使用 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() })

【问题讨论】：

您是否尝试过设置dy 属性？
呸！而已。谢谢拉斯。您应该将其发布为答案，我会检查它，以便您获得积分。再次感谢

标签： text svg path d3.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

创建的 JS fiddle 示例在 D3 强制布局图中的链接上显示标签

在 JS Fiddle 中查看工作演示：http://jsfiddle.net/bc4um7pc/

var linktext = svg.append("svg:g").selectAll("g.linklabelholder").data(force.links());

linktext.enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("dx", "30")
 .attr("dy", "-5")
 .attr("text-anchor", "start")
 .style("fill","#000")
 .append("textPath")
 .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text(function(d) { 
 return d.type; 
 });

【讨论】：