在单击 D3 .js 时隐藏可见元素

Hiding visible elements on click D3.js

本文关键字：元素 隐藏 单击 D3 js      更新时间：2023-09-26

我正在使用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的最佳/最有效的方法是什么

如果你的圈子有一个类，比如".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 元素也做同样的事情。这将隐藏除您当前单击的圈子之外的所有圈子。

相关文章：