如何在D3.js中向折线边添加文本标签

Question

我不得不使用折线来绘制边缘，因为我需要在中间带有箭头标记的直线边缘。 （如Display an arrow head in the middle of D3 force layout link中所述）。

我还需要在边缘添加标签（像http://jsfiddle.net/bc4um7pc/这样的东西）。 据我所知，textPath用于向路径添加文本标签。如何使其适用于折线边缘。 textPath似乎不适用于折线。我如何使这项工作？

var path = svg.append("svg:g").selectAll("path");
path = path.data(force.links(), function(d,i) {return d.source.id + "-" + d.target.id; });  
path.enter()
.append("polyline")
.attr("class", function(d) {  return "link " + d.type; })
.attr("id",function(d,i) { return "linkId_" + i; })
.attr("marker-mid", function(d) { return "url(#" + d.type + ")"; });

var linktext = svg.append("svg:g").selectAll(".linklabelholder");
linktext = linktext.data(force.links())
 .enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("x", "50")
 .attr("y", "-20")
 .attr("text-anchor", "start")
 .style("fill","#000")
 .append("textPath")
 .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text( "test");