D3.js鼠標懸停失敗，並以重疊的對象

在D3.js似乎來觸發其他對象則模糊它們成爲不可見的鼠標懸停聽者之前繪製的對象。有沒有解決這個問題的方法？D3.js鼠標懸停失敗，並以重疊的對象

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head> 
    <script type="text/javascript" src="scripts/d3.v3.js"></script> 
</head> 
<body> 
    <div id="viz"></div> 
    <script type="text/javascript"> 

    d3.select("body").style("background-color", "black"); 

    var sampleSVG = d3.select("#viz") 
     .append("svg") 
     .attr("width", 400) 
     .attr("height", 200); 

    sampleSVG.append("circle") 
     .style("fill", "grey") 
     .style("stroke-width", 2) 
     .attr("r", 60) 
     .attr("cx", 150) 
     .attr("cy", 100) 
     .on("mouseover", function(){d3.select(this).style("fill", "red");}) 
     .on("mouseout", function(){d3.select(this).style("fill", "grey");}); 

    sampleSVG.append("circle") 
     .style("stroke", "yellow") 
     .style("opacity", 0.5) 
     .style("stroke-width", 2) 
     .attr("r", 100) 
     .attr("cx", 250) 
     .attr("cy", 100) 

    </script> 
</body> 
</html>

來源

2013-03-21 geotheory

解決方案是添加「.style（」pointer-events「，」none「）;」最後一圈：

sampleSVG.append("circle") 
    .style("stroke", "yellow") 
    .style("opacity", 0.5) 
    .style("stroke-width", 2) 
    .attr("r", 100) 
    .attr("cx", 250) 
    .attr("cy", 100) 
    .style("pointer-events", "none");

這裏是一個工作示例http://tributary.io/inlet/5215694

注：如果大圈都有填充屬性設置爲「無」，那麼例子也按預期工作而不需要「指針-events「設置爲無。

來源

2013-03-21 19:01:37 RobinL

這確實解決了我眼前的問題。但10的獎金將是如何同時選擇兩個對象？我想一個解決方法可能是臨時調用'.style（「pointer-events」，「none」）'並且用例如'each（）'完成後重新激活，但希望有一個更優雅的解決方案。 – geotheory 2013-03-21 20:39:33

D3.js鼠標懸停失敗，並以重疊的對象

回答

相關問題