点击隐藏可见元素D3.js

Question

我使用D3.js动态创建svg元素。当我点击了一圈，我运行这个功能：从事实

 .on("click", function(d) { 
      d3.select(this).select("rect").transition().duration(900).style("visibility", "visible"); 
      d3.select(this).selectAll("tspan").transition().duration(900).style("visibility", "visible"); 
     }) 

除此之外，我转换不工作时，点击该圆圈显示，孩子们圆矩形和TSPAN，一切都很好。但是，如果我点击另一个圆圈，新的矩形和tspan显示，但我需要当前隐藏。想知道什么是最好/最有效的方式做到这一点是与D3

Answer 1

如果你的圈子中有一类，说“.circle”，你可以做这样的事情：

.on("click", function(d) { 
    var clickedCircle = this; 
    d3.selectAll(".circle").each(function() { 
     var currCircle = this; 
     d3.select(this).select("rect").transition().duration(900).style("visibility", function() { 
      return (currCircle === clickedCircle) ? "visible" : "hidden"; 
     }); 
    }); 
}); 

而且很明显这样做为你的tspan元素。这会隐藏除当前点击的圈子之外的所有圈子。