Animation 在D3.js v5中，从鼠标上方的多个文本路径转换选定的文本路径

我试图仅转换鼠标悬停的文本路径，但下面示例中的两个文本路径都被转换。有没有办法在悬停时只转换一个

对于下面的代码，我进行了修改，现在使用的是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>

//创建SVG
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，900）
.attr（“高度”，900）；
类图{
建造师（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'，此为.handleMouseOver）；
this.background=this.container.append（'g'））
.attr（'class'，'background-viz'）
这个.appendText（）；
}
附录文本（）{
var d=“M0300 A200200,1 400300”；
控制台日志（d）；
var path=this.background.append（“路径”）
.attr（“id”、“波浪状”）
.attr（“d”，d）
.style（“填充”、“无”）
.风格（“笔划”，“AAAAA”）
.style（“笔划数组”、“5,5”）；
var textArc=this.background.append（“文本”）
.style（“文本锚定”、“中间”）
.append（“textPath”）
.attr（“xlink:href”，“波浪形”）
.attr（“startOffset”，“50%”）
.text（“此处文本的占位符”）；
}
handleMouseOver（）{
var d=“M75300 A125125 0,1 325300”；
控制台日志（'new'，d）；
d3.选择（这个）。选择（'.background-viz'）。选择全部（'path'））
.transition（）
.attr（“d”，“M75300 A125125 0,1 325300”）；
}
}
对于（变量i=0；i<2；i++）{
新图形({
x:i*900/2，
y:0
});
}

问题在于以下几行：

textPath.attr（“xlink:href”，“波浪”）

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

以下是方法：

创建路径、文本（即到每个实例）时传递ID

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

使用它/将其应用于路径和文本路径：

var path = this.background.append("path")
   .attr("id", "wavy-"+this.id)
 ....

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

使用上述更改，下面是一个代码片段：

//创建SVG
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，900）
.attr（“高度”，900）；
类图{
建造师（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'，此为.handleMouseOver）；
this.background=this.container.append（'g'））
.attr（'class'，'background-viz'）
这个.appendText（）；
}
附录文本（）{
var d=“M0300 A200200,1 400300”；
var path=this.background.append（“路径”）
.attr（“id”，“波浪-”+此.id）
.attr（“d”，d）
.style（“填充”、“无”）
.风格（“笔划”，“AAAAA”）
.style（“笔划数组”、“5,5”）；
var textArc=this.background.append（“文本”）
.style（“文本锚定”、“中间”）
.append（“textPath”）
.attr（“xlink:href”，“波浪-”+this.id）
.attr（“startOffset”，“50%”）
.text（“此处文本的占位符”）；
}
handleMouseOver（）{
var d=“M75300 A125125 0,1 325300”；
//控制台日志（'new'，d）；
d3.选择（这个）。选择（'.background-viz'）。选择全部（'path'））
.transition（）
.attr（“d”，“M75300 A125125 0,1 325300”）；
}
}
对于（变量i=0；i<2；i++）{
新图形({
x:i*900/2，
y:0，
id:我
});
}

---

首先，您必须将

鼠标盖

连接到

路径

，并使用

此

设置路径动画谢谢@Shashank！很高兴我能帮忙！：）