Метка с несколькими ссылками в силовом макете (v3) - PullRequest
0 голосов
/ 19 марта 2019

введите описание изображения здесь Я использую раскладку d3.js и хочу метку на краю. Я пытался, но по краям отображаются несколько меток, и когда я хочу очистить холст, метка остается на холсте.

var edgepaths = svg.selectAll(".edgepath");
        link.data(links)
            .enter()
            .append('path')
            .attr({
                'd': function (d) { return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y },
                'class': 'edgepath',
                'fill-opacity': 0,
                'stroke-opacity': 0,
                'fill': 'blue',
                'stroke': 'red',
                'id': function (d, i) { return 'edgepath' + i }
            })
            .style("pointer-events", "none");




        var edgelabels = svg.selectAll(".edgelabel");
            link.data(links)
            .enter()
            .append('text')
            // .style("pointer-events", "none")
            .attr({
                'class': 'edgelabel',
                'id': function (d, i) { return 'edgelabel' + i },
                'dx': 50,
                'dy': -2,
                'font-size': 13,
                'fill': '#aaa'
            })

           .append('textPath')
            .attr('xlink:href', function (d, i) { return '#edgepath' + i })
            .style("pointer-events", "none")
            .text(function (d, i) { return d.linkProperties.ns.description });

Мой код в функции тиков:

 edgepaths.attr('d', function(d) { var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
        // console.log(path)
        return path});      

        edgelabels.attr('transform',function(d,i){
            if (d.target.x<d.source.x){
                bbox = this.getBBox();
                // console.log(bbox);
                rx = bbox.x+bbox.width/2;
                ry = bbox.y+bbox.height/2;
                return 'rotate(180 '+rx+' '+ry+')';
                }
            else {
                return 'rotate(0)';
                }
        });

Здесь я поделился своим скриншотом графика d3.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...