.selectAll()

Anonymous contributor's avatar
Anonymous contributor
Published Jun 12, 2024Updated Jun 20, 2024
Contribute to Docs

The .selectAll() is a function within the d3 library that selects all elements matching the provided parameter. The selectAll() function will match against all elements that meet the parameter, as opposed to .select(), which only matches the first element.

Syntax

d3.selectAll(selector)
  • selector: It’s a string version of an element, a saved node, or an array of nodes.

Example

In this example, we have an HTML document as shown in the below code block:

<h1>Lorem, ipsum.</h1>
<p>
Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit.</span> Tempore
repellendus sed dignissimos eveniet quam. Nostrum.
</p>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea harum saepe alias
quae beatae quis corporis ratione
<span>laudantium reprehenderit labore</span> fuga numquam, aperiam dicta
facere earum non unde laboriosam, similique debitis qui soluta possimus
obcaecati voluptates asperiores. Natus cumque ratione porro eveniet excepturi
rem similique nam reiciendis debitis, itaque
<span>pariatur dolores</span> perferendis beatae praesentium amet nulla?
Repellendus a voluptatem sed id porro quia earum molestiae quidem tenetur
accusamus ratione illo aut
<span
>similique inventore non voluptate, doloremque consectetur dignissimos
beatae ipsum temporibus tempore?</span
>
Voluptatum accusamus non distinction nesciunt quis suscipit, sequi,
necessitatibus, ut delectus praesentium iusto? Nisi sequi itaque voluptatem
dolor!
</p>

The document gives the following output:

HTML page before adding `.selectAll()` d3 query.

The following code selects all span elements within the above page using the .selectAll() method:

<script>
d3.selectAll('span').style('color', 'red');
</script>

This gives the following output:

HTML page before adding `.selectAll()` d3 query.

Note: When using d3 within an HTML page, it is required to add <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> inside the head tag.

All contributors

Contribute to Docs

Learn JavaScript:D3 on Codecademy