.selectAll()
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> Temporerepellendus 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 aliasquae beatae quis corporis ratione<span>laudantium reprehenderit labore</span> fuga numquam, aperiam dictafacere earum non unde laboriosam, similique debitis qui soluta possimusobcaecati voluptates asperiores. Natus cumque ratione porro eveniet excepturirem similique nam reiciendis debitis, itaque<span>pariatur dolores</span> perferendis beatae praesentium amet nulla?Repellendus a voluptatem sed id porro quia earum molestiae quidem teneturaccusamus ratione illo aut<span>similique inventore non voluptate, doloremque consectetur dignissimosbeatae ipsum temporibus tempore?</span>Voluptatum accusamus non distinction nesciunt quis suscipit, sequi,necessitatibus, ut delectus praesentium iusto? Nisi sequi itaque voluptatemdolor!</p>
The document gives the following output:
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:
Note: When using d3 within an HTML page, it is required to add
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
inside thehead
tag.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.