show/hide layers in d3.js

Question

First of all: I'm new to d3.js!

I have a map and some points displayed on it. Now I want to add buttons to show/hide the points. What I have until now:

function checkAll(){
    d3.selectAll("g").attr("visibility", "visible");
}
function uncheckAll(){
    d3.selectAll("g").attr("visibility", "hidden");
}

This works so far but hides/shows the whole map.

I have a function "drawpoints()" that draws the points on the map. How can I change my code that it only shows/hides the points and not the whole map?

Depends on what your "points" are. If they are circles, try `d3.selectAll("circle")...`. — Lars Kotthoff, Mar 07 '14 at 14:04
they come from an geojson file and actually are only coordinates — user3346326, Mar 07 '14 at 14:19
What are the elements you're adding to represent the points? — Lars Kotthoff, Mar 07 '14 at 14:21
you need to specify the elements that you want to hide/show in the selection, if the circles have all the same id or class you can do .selectAll("nameofcircles") and then apply the visibility property — tomtomtom, Mar 07 '14 at 14:40
They are all path elements. d3.selectAll("path")... works but all the parts I want to keep are also path elements. The circles have different classes and I also tried .selectAll("nameofcircles"), to see if it works for one group but nothing happened. — user3346326, Mar 07 '14 at 20:16
Can you provide an example? Say in a fiddle or something similar. — user1614080, Mar 07 '14 at 20:36

score 9 · Accepted Answer · answered Mar 07 '14 at 22:14

9

You would need to select only the elements that you want to hide. If, for example, they are identified by a class, you would do the following:

d3.selectAll(".classOfCircles").attr("visibility", "hidden");

answered Mar 07 '14 at 22:14

Lars Kotthoff

107,425
16
204
204

show/hide layers in d3.js

1 Answers1

Linked