Selecting multiple elements

Often selecting a single element is not good enough, but rather you want to apply a certain change to a set of elements on the page simultaneously. In this recipe, we will play with the D3 multi-element selector and its selection API.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/multiple-selection.html .

How to do it...

This is what the d3.selectAll function is designed for. In the following code snippet, we will select three different div elements and enhance them with some CSS classes:

<div></div> 
<div></div> 
<div></div> 
 
<script type="text/javascript"> 
    d3.selectAll("div") // <-- A 
    .attr("class", "red box"); // <-- B 
</script> 

This code snippet produces the following visual:

Multi-element selection

How it works...

First thing you probably will notice in this...