如何在边上添加文本标签

时间:2017-04-24 14:50:28

标签: javascript d3.js svg force-layout directed-graph

伙计们,我在我的应用程序http://bl.ocks.org/rkirsling/5001347中关注此示例,并希望在边缘显示文本,但到目前为止还没有取得成功。任何人都可以指导我如何在这个具体例子的边缘放置文本。

this.path = this.svg.append('svg:g').selectAll('path')
this.path = this.path.data(uncollapsedLinks);
    this.path.classed('selected', function (d) { return d === this.selected_link; })
        .style('marker-start', function (d) { return d.left ? 'url(#start-arrow)' : ''; })
        .style('marker-end', function (d) { return d.right ? 'url(#end-arrow)' : ''; });


    // add new links
    this.path.enter()
        .append('svg:path')
        .attr('class', 'link')
        .classed('selected', function (d) { return d === this.selected_link; })
        .style('marker-start', function (d) { return d.left ? 'url(#start-arrow)' : ''; })
        .style('marker-end', function (d) { return d.right ? 'url(#end-arrow)' : ''; })


    var edgelabels = this.svg.selectAll(".link")
        .append('text')
        .style("pointer-events", "none")
        .attr({
            'class': 'edgelabel',
            'id': function (d, i) { return 'edgelabel' + i },
            'font-size': 10,
            'fill': '#aaa'
        })
        .attr("dx", 20)
        .attr("dy", 0)
        .append('textPath')
        .attr('xlink:href', function (d, i) { return '#edgepath' + i })
        .style("pointer-events", "none")
        .text(function (d, i) { return 'label ' + i });

0 个答案:

没有答案