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，并且当您将鼠标悬停在一个路径上时，您会看到两个textPath都在过渡。您必须根据一些值来区分ID。最好的解决方案是传递一个ID并使用它：

方法如下：

在创建路径，文本（即到每个实例）的同时传递ID
```
new graph({
    x: i  * 900/2,
    y: 0,
    id: i
});
```

使用它/将其应用于路径和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>

希望这会有所帮助。

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

1 个答案: