JS中使用textPath实现线条上的文字

<svg viewBox="0 0 1000 300"    xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">   <path id="MyPath"      d="M 100 200         C 200 100 300  0 400 100        C 500 200 600 300 700 200        C 800 100 900 100 900 100" fill="none" stroke="red"/>  <text font-family="Verdana" font-size="42.5">   <textPath xlink:href="#MyPath" rel="external nofollow" >    We go up, then we go down, then up again   </textPath>  </text> </svg>

var link = svg.append("g").selectAll(".edgepath")        .data(graph.links)        .enter()        .append("path")        .style("stroke-width",0.5)        .style("fill","none")        .attr("marker-end",function(d){         return "url(#"+d.source+")";        })        .style("stroke","black")        .attr("id", function(d,i){         return "edgepath"+i;        }); var edges_text = svg.append("g").selectAll(".edgelabel")         .data(graph.nodes)           .enter()           .append("text")           .attr("class","edgelabel")           .attr("id", function(d,i){            return "edgepath"+i;           })           .attr("dx",80)           .attr("dy",0); edges_text.append("textPath")       .attr("xlink:href", function(d,i){         return "#edgepath"+i;       }).text(function(d){        return d.id;       })