javascript - 单击 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 元素执行相同的操作。这将隐藏除您当前点击的圈子之外的所有圈子。