在单击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元素也是如此。这将隐藏您当前单击的圈子以外的所有圈子。