基本上我试图让所有的路径除了一个被翻转为灰色的路径,而被选中的路径保持它的原始颜色.我已经能够将所有其他路径变为灰色,但是我遇到了"select.this"功能的问题并且实际上访问了我想要改变样式的路径.看来我实际上已经设法进入g组中的path元素,但是我在控制台中遇到错误
Uncaught TypeError: Property 'style' of object #is not a function
相关代码:
svg.selectAll("g.team") .on("mouseover",function(){ console.log("I see you!"); var lineName; var accuracy = 10; svg.selectAll("path.team.line").style("stroke","#C0C0C0"); //set all to gray var selectedArray = d3.select(this); console.log(selectedArray); var selectGroup = selectedArray[0]; console.log("should be group:"+selectGroup); var selectedLine = selectGroup[0];; selectedLine.style("color",function(d){ //let active keep color lineName = abbrDict[d.name]; //full name to be at end of line return color(d.name); }); //get position of end of line var len = d3.select(this).children().node().getTotalLength(); var pos = d3.select(this).node().getPointAtLength(len); //append text to end of line svg.append("text") .attr("id","tooltip") .attr("x",pos.x-55) .attr("y",pos.y) .text(lineName) .style("font-family","sans-serif") .style("font-size",13); this.parentNode.parentNode.appendChild(this.parentNode); //brings team to front, must select the path's g parent //to reorder it }) .on("mouseout",function(){ d3.select("#tooltip").remove(); d3.selectAll("team").selectAll("path") .transition() .style("stroke",function(d){ return color(d.name); //return all the colors }); d3.selectAll("axis").selectAll("line").style("color","black"); });
谢谢,麻烦您了!