在 D3.js v5 中鼠标悬停时从多个文本路径转换选定的文本路径

Question

我正在尝试仅转换鼠标悬停在其上的文本路径，但以下示例中的两个文本路径都已转换。有没有办法只在悬停时转换那个？

对于下面的代码，我修改了this example，我使用的是 D3.js 的第 5 版。

这是脚本：

<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")

由于两个路径具有相同的 ID，并且当您将鼠标悬停在其中一个上时，您会看到两个 textPaths 都在转换。您必须根据某些值来区分 ID。最好的解决方案是传递一个 ID 并使用它：

方法如下：

1. 在创建路径时传递 ID，文本即到每个实例

   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)
   

使用上面的改动，这里是一个sn-p的代码：

    //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>

希望这会有所帮助。