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

近期在项目中要实现关系图,需要在线条上绘制文字。要实现这个功能,我们需要在SVG中连接的线条从标签line修改为path,这样才可能实现类似如下的效果:

1个简单的例子如下所示:

在这里我们需要实现1个path,然后设置其ID属性,之后我们创建textPath标签,并链接到上述的ID属性,这样就可以实现在路径上关联文字了。

而在D3中我们可以这样操作:

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

实际上这段代码就是上述例子的实现,这样就可以避免编写繁琐的SVG代码了。

总结

以上所述是小编给大家介绍的使用textPath实现线条上的文字，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！