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.
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 .
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