将SVG行置于前面，Uncaught InvalidCharacterError

Question

https://gist.github.com/dukevis/9039575

我有一个多线图，我希望它是这样的，当你将鼠标悬停在图例框上时，你悬停在其上的团队会保留其颜色，而其余的线会变灰。然而，我已经设法将这支球队带到其他线路的“前线”。通过将所选行重新附加到svg，我可以直接将鼠标悬停在线上，从而成功实现了这一功能。但是，当我尝试从图例框中执行此操作时，我收到一条错误消息： “Uncaught InvalidCharacterError：该字符串包含无效字符。”

代码的相关部分（或我认为相关的部分）在这里

svg.selectAll("g.keybox").on("mouseover",function(){        
        var keepName = this.textContent;
        var selectedLine_box;
        svg.selectAll("path.team.line").style("stroke", function(d){
            if(abbrDict[d.name]!=keepName){
                return "#C0C0C0";
            }
            else{

                selectedLine_box = d3.select(this);
                return color(d.name);
            }
        });

        var pathNode = selectedLine_box.node();
        var len = pathNode.getTotalLength();
        var pos = pathNode.getPointAtLength(len);  


        svg.append("text")
                        .attr("id","tooltip")
                        .attr("x",w-55)
                        .attr("y",pos.y-3)
                        .text(keepName)
                        .style("font-family","sans-serif")
                        .style("font-size",14+"px");

        console.log(selectedLine_box);
        svg.append(selectedLine_box); //this causes an error saying "string contains invalid characters" and doesn't successfully re-append the line over the other lines



        });`

页面顶部还有指向整个代码的链接，您可以通过bl.ocks扩展名查看图表。

谢谢！