javascript - Hiding visible elements on click D3.js - Stack Overflow

admin管理员组

文章数量:1279008

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

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

• javascript
• html
• d3.js
• svg
• onclick

Share Improve this question Follow asked Mar 6, 2016 at 15:53 JordanBarberJordanBarber 2,10166 gold badges3737 silver badges6464 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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.

本文标签： javascriptHiding visible elements on click D3jsStack Overflow