d3.js中的Z索引

我有一張地圖，當鼠標懸停在黃色線和圓圈下方的地圖區域上時，最後一個會消失。我怎麼解決這個問題？d3.js中的Z索引

 var arc = g.append("path") 
     .style("fill", "none") 
     .style("stroke", "yellow") 
     .style("stroke-width", 2) 
     .attr("d", "M" + pathOrigin[0] + "," + pathOrigin[1] + " Q" + svgPoint[0] + "," + pathOrigin[1] + " " + svgPoint[0] + "," + svgPoint[1]); 

     var circleSize = d3.scale.linear() 
     .domain([0, 0.5, 1]) 
     .range([4, 10, 4]);

來源

2017-08-14 yavg

你有什麼問題？我沒有看到任何不尋常的東西消失。 –

該行黃色。你應該在線黃色 – yavg

SVG不具有Z順序，但在他們創建的順序繪製的對象。創建高亮區域後，只需創建path和circle即可。

這裏是分叉的小提琴： http://jsfiddle.net/o00fzgaf/1/

來源

2017-08-14 17:17:49 Marcelo

偉大的懸停效果... 但是，如果我然後要動態地添加更多的圈......我該怎麼辦？ – yavg

您可以隨時添加svg元素並將其不透明度設置爲0：'.style（「opacity」，0）「。當你需要該元素可見時，只需更改不透明度即可。您也可以更新他們的位置。 – Marcelo

您應該爲您的圈子添加包裝。您現在將所有內容添加到相同的g。使用您的瀏覽器檢查器查看g分組 –

d3.js中的Z索引

回答

相關問題