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鼠标悬停失败，并以重叠的对象

回答

相关问题