show/hide layers in d3.js

d3.js show-hide layer
user3346326 picture user3346326 · Mar 7, 2014 · Viewed 7.9k times · Source

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?

Answer

Lars Kotthoff picture Lars Kotthoff · Mar 7, 2014

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

Related questions

Show data on mouseover of circle

I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using: …

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question : Get the size of the screen, current web page and browser window I'm using this answer : var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(…

Read More