Hiding visible elements on click D3.js

Question

I am using D3.js to dynamically create svg elements. When I click a circle, I run this function:

       .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");
        })

Aside from the fact that my transitions aren't working, clicking on the circle shows that circles children rectangle and tspan, all is well. However if I click another circle, the new rectangle and tspan show but I need the current one to hide. Wondering what the best/most efficient way to do this is with D3

Answer 1

If your circles have a class, say ".circle", you can do something like this:

.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";
        });
    });
});

And obviously do the same for your tspan element. This will hide all but your currently clicked circle.