d3.js: 在曲线路径上添加文本标记的正确方式

今天遇到一个在曲线路径上标识文本标记的问题，找到一个比较好的解决思路，在这里分享下：

使用d3建立的Force Layout，加上自定义的箭头形状，将多条连接线线改成弧线（https://www.cnblogs.com/webhmy/p/10906268.html）。现需沿弧线加上文字

var edgelabels = svg.selectAll(".edgelabel")
        .data(dataset.edges)
        .enter()
        .append('text')
        .attr(...);

    edgelabels.append('textPath')
        .attr('xlink:href',function(d,i) {return '#edgepath'+i})
        .text(function(d,i){return 'label '+i});

使用text元素定义文字，然后为text元素添加textPath子元素，通过指定textPath的属性，将文字的定位与其他路径关联起来。定义弧线路径需要添加id属性

var path = svg.append('svg:g').selectAll('path')
        .data(force.links())
        .enter().