Переход выделенного текстового пути из нескольких текстовых путей при наведении мыши в D3.js v5

Question

Я пытаюсь перевести только текстовый путь, на котором я нахожу мышь, но оба текстовых пути в приведенном ниже примере переведены.Есть ли способ только перевести один при наведении?

Для кода ниже я изменил этот пример , и я использую версию 5 D3.js.

Здесьтакое скрипт:

<script>
    //Create the SVG
    var svg = d3.select("body").append("svg")
                .attr("width", 900)
                .attr("height", 900);

    class graph {

        constructor(opts){
            this.x = opts.x;
            this.y = opts.y;

            this.container = svg.append('g')
                .attr('class', 'country-wrapper')
                .attr('transform', 'translate(' + this.x + ',' + this.y + ')')
                .on('mouseover', this.handleMouseOver);
            this.background = this.container.append('g')
                .attr('class', 'background-viz')
            this.appendText();
        }
        appendText(){
            var d = "M0,300 A200,200 0 0,1 400,300";
            console.log(d);
            var path = this.background.append("path")
                .attr("id", "wavy")
                .attr("d", d)
                .style("fill", "none")
                .style("stroke", "#AAAAAA")
                .style("stroke-dasharray", "5,5");


            var textArc = this.background.append("text")
                .style("text-anchor","middle")
              .append("textPath")
                .attr("xlink:href", "#wavy")
                .attr("startOffset", "50%") 
                .text("placeholder for text here");
        }


        handleMouseOver(){
            var d = "M75,300 A125,125 0 0,1 325,300";
            console.log('new ', d);
            d3.select(this).select('.background-viz').selectAll('path')
                .transition()
                .attr("d", "M75,300 A125,125 0 0,1 325,300");
        }
    }

    for (var i = 0; i < 2; i++){
        new graph({
            x: i  * 900/2,
            y: 0
        });
    }
</script>

Answer 1

Проблема связана со следующей строкой:

textPath.attr("xlink:href", "#wavy")

, поскольку оба пути имеют одинаковые идентификаторы и при наведении на них вы видите переход обоих textPaths.Вы должны дифференцировать идентификаторы на основе некоторого значения.Лучшим решением было бы передать идентификатор и использовать его:

Вот как:

1. Передать идентификатор при создании путей, текстов, т. Е. Каждому экземпляру

   new graph({
       x: i  * 900/2,
       y: 0,
       id: i
   });
   

2. Используйте его / примените к путям и textPaths:

   var path = this.background.append("path")
      .attr("id", "wavy-"+this.id)
    ....
   
    .append("textPath")
    .attr("xlink:href", "#wavy-"+this.id)
   

Используя приведенные выше изменения, приведен фрагмент кода:

    //Create the SVG
    var svg = d3.select("body").append("svg")
                .attr("width", 900)
                .attr("height", 900);
                
    class graph {

        constructor(opts){
            this.x = opts.x;
            this.y = opts.y;
            this.id = opts.id;

            this.container = svg.append('g')
                .attr('class', 'country-wrapper')
                .attr('transform', 'translate(' + this.x + ',' + this.y + ')')
                .on('mouseover', this.handleMouseOver);
            this.background = this.container.append('g')
                .attr('class', 'background-viz')
            this.appendText();
        }
        appendText(){
            var d = "M0,300 A200,200 0 0,1 400,300";
            var path = this.background.append("path")
                .attr("id", "wavy-"+this.id)
                .attr("d", d)
                .style("fill", "none")
                .style("stroke", "#AAAAAA")
                .style("stroke-dasharray", "5,5");


            var textArc = this.background.append("text")
                .style("text-anchor","middle")
              .append("textPath")
                .attr("xlink:href", "#wavy-"+this.id)
                .attr("startOffset", "50%") 
                .text("placeholder for text here");
        }

        
        handleMouseOver(){
            var d = "M75,300 A125,125 0 0,1 325,300";
            //console.log('new ', d);
            d3.select(this).select('.background-viz').selectAll('path')
                .transition()
                .attr("d", "M75,300 A125,125 0 0,1 325,300");
        }
    }

    for (var i = 0; i < 2; i++){
        new graph({
            x: i  * 900/2,
            y: 0,
            id: i
        });
    }

<script src="https://d3js.org/d3.v5.min.js"></script>

Надеюсь, это поможет.