----------------------------------------------------------
Show / hide an element by clicking on another element
This is a trick that I found I wanted to implement in order to present a graph with a range of lines and to then provide the reader with the facility to click on the associated legend to toggle the visibility of the lines off and on as required.
The example we’ll follow is our friend from earlier, a slightly modified example of the graph with two lines.
 |
| Show / hide lines on a graph |
In this example we will be able to click on either of the two titles at the bottom of the graph (‘Blue Line’ or ‘Red Line’) and have it toggle the respective line and Y axis.
THE CODE
The code for the example is available online at bl.ocks.org or GitHub. It is also available as the file ‘show-hide.html’ as a separate download with D3 Tips and Tricks. A copy of most the files that appear in the book can be downloaded (in a zip file) when you download the book from Leanpub.
There are two main parts to implementing this technique. Firstly we have to label the element (or elements) that we wish to show / hide and then we have to give the object that will get clicked on the attribute that allows it to recognize a mouse click and the code that it subsequently uses to show / hide our labelled element.
Labeling the element that is to be switched on and off is dreadfully easy. It simply involves including an
idattribute to an element that identifies it uniquely.svg.append("path")
.attr("class", "line")
.attr("id", "blueLine")
.attr("d", valueline(data));
In the example above we have applied the
id blueLine to the path that draws the blue line on our graph.
The second part is a little trickier. The following is the portion of JavaScript that places our text label under the graph. The only part of it that is unusual is the
.on("click", function() section of the code.svg.append("text")
.attr("x", 0)
.attr("y", height + margin.top + 10)
.attr("class", "legend")
.style("fill", "steelblue")
.on("click", function(){
// Determine if current line is visible
var active = blueLine.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements
d3.select("#blueLine").style("opacity", newOpacity);
d3.select("#blueAxis").style("opacity", newOpacity);
// Update whether or not the elements are active
blueLine.active = active;
When we click on our ‘Blue Line’ text element the
.on("click", function() section executes.
We’re using a short-hand version of the
if statement a couple of times here. Firstly we check to see if the variable blueLine.active is true or false and if it’s true it gets set to false and if it’s false it gets set to true (not at all confusing). var active = blueLine.active ? false : true,
newOpacity = active ? 0 : 1;
Then after toggling this variable we set the value of
newOpacity to either 0 or 1 depending on whether active isfalse or true (the second short-hand JavaScript if statement).
We can then select our identifiers that we have declared using the
id attributes in the earlier pieces of code and modify their opacity to either 0 (off) or 1 (on) d3.select("#blueLine").style("opacity", newOpacity);
d3.select("#blueAxis").style("opacity", newOpacity);
Lastly we update our
blueLine.active variable to whatever the active state is so that it can toggle correctly the next time it is clicked on. blueLine.active = active;
Quite a neat piece of code. Kudos to Max Leiserson for providing the example on which it is largely based in an answer to a question on Stack Overflow.
The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).
