Hiding visible elements on click D3.js

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