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

方法如下：

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

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

将it/apply用于路径和文本路径：

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 中，在鼠标悬停时从多个文本路径转换选定的文本路径

Transition selected textpath from multiple textpaths on mouseover in D3.js v5

animation

text

onmouseover

automatic-ref-counting

d3.js