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元素做同样的事情。这将隐藏您当前点击的所有圈子。

单击D3.js隐藏可见元素

1 个答案: