Tutorial
D3.js: Understanding Selections and Comparing with Vanilla JavaScript
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This article aims to show how selections work within D3. We’ll start with a basic project that includes d3.js as a script with no build system:
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3: Selections</title>
</head>
<body>
<div class="about-me">
<p>Hi! My name is Paul and here's some facts about me.</p>
<ul id="list">
<li>I'm a powerlifter</li>
<li>I'm studying MSc Data Science</li>
<li>I love D3.js!</li>
</ul>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Consider how we may make selections and modify DOM elements without D3:
const listItems = [...document.getElementsByTagName('li')];
listItems.map(item => item.style.setProperty('font-weight', 'bold'));
While this isn’t very complex right now, we can expect that things will get harder and more difficult to reason as we scale. Here’s why we need to consider D3.
Selections in D3
Notice how when we wanted to manipulate multiple elements in the DOM we had to map over them. D3 selections allow us to query one or more elements on the page and allows us to manipulate the whole selection without the need for iteration on our part.
It uses standard CSS selector syntax, so you can expect to query an element by it’s name, a class with .about-me, an id with #list, and so on.
We can select elements from the DOM with either:
select()takes one element from the DOM. If there are multiple matches, only the first one will be taken.selectAll()takes all elements from the DOM.
Example
Let’s take a look at this with a code example. Doing the same as our vanilla JavaScript example can be done in one line:
const li = d3.selectAll('li').style('font-weight', 'bold');
As you can see, it returns a collection of elements which we can chain into other methods such as style.
If we change this to be select instead of selectAll, you’ll notice that I'm a powerlifter is the only li that gets bolded – this is expected as it’s the first li in the DOM.
Appending a new list item
To further show the power of selections, consider how we may want to add a new li to the DOM with JavaScript:
const ul = document.getElementsByTagName('ul')[0];
const newItem = document.createElement('li');
newItem.appendChild(document.createTextNode(`I'm learning about selections.`));
ul.appendChild(newItem);
Once again, this isn’t exactly the best workflow when we’re looking to create complex data visualizations. Let’s look at the same example with D3:
const ul = d3.select('ul');
ul.append('li').text(`I'm learning about selections`);
Much easier! Each function returns the updated value of the previous change or query, allowing us to chain methods together in a powerful way.
Sub Selections
We’re also able to select items within our selection. Let’s take a look at this by selecting the first li from within our ul selection and making it red:
const ul = d3.select('ul');
ul.select('li').style('color', 'red');
ul.append('li').text(`I'm learning about selections`);
As you can see, we’re not just limited to the initial selection. We can continue to make sub selections and get more specific about our implementation.
What do Selections Look Like?
Let’s use console.log to inspect our select query to look at what gets returned:
{
_groups: [Array(1)]
_parents: [html]
}
If we expand _groups, you’ll see that it returns our ul as per the selection. If we changed our selection to be selectAll('li'), the _groups returns an Array containing a collection of lis inside of a NodeList(3).
const li = d3.selectAll('li');
console.log(li);
_groups: Array(1)
0: NodeList(3)
0: li
1: li
2: li
_parents: [html]
Naturally, the _parents object contains the parent for this selection, being the root html object.
And that’s it for now! Stay tuned for more about using D3.js.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
