61
D3.js (Data-Driven Documents) is a powerful JavaScript library for creating dynamic, interactive data visualizations.
One of its core features is selections, which allows you to select, modify, and manipulate DOM elements based on data.
In this tutorial, you'll learn:
- What selections are.
- How to create and modify selections.
- Common selection methods and chaining.
- Practical examples to build dynamic visualizations.
1. What are Selections in D3.js?
Selections in D3 are used to target DOM elements and bind them to data. You can manipulate these elements by applying attributes, styles, and event listeners.
Why Use Selections?
- Efficient DOM manipulation
- Dynamic data binding
- Smooth transitions and interactivity
2. Basic Selection Syntax
d3.select("selector")
- d3.select(): Selects the first matching DOM element.
- d3.selectAll(): Selects all matching DOM elements.
3. Setting Up the Environment
- Create an HTML file and load D3.js via CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Selections</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>D3.js Selections Tutorial</h1>
<div id="chart"></div>
<script>
// Your D3 code goes here
</script>
</body>
</html>
4. Selecting and Modifying Elements
Example 1: Selecting and Changing Text
d3.select("h1")
.text("Updated Title with D3.js")
.style("color", "steelblue");
Explanation:
- Selects the <h1> element.
- Modifies the text and applies CSS styles dynamically.
Example 2: Selecting All Elements (Multiple Selections)
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
d3.selectAll("p")
.style("color", "orange")
.text("Modified by D3");
</script>
Explanation:
- Targets all <p> elements and changes their color and text simultaneously.
Example 3: Appending New Elements
d3.select("#chart")
.append("p")
.text("This is a dynamically added paragraph.")
.style("font-size", "18px");
Explanation:
- Selects the #chart div.
- Appends a new <p> element to it dynamically.
5. Binding Data to Elements (Data Joins)
One of the most powerful features of D3 is binding data directly to DOM elements.
Example 4: Creating List Items from Data
<ul id="list"></ul>
<script>
const data = ["Item 1", "Item 2", "Item 3"];
d3.select("#list")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text(d => d)
.style("color", "teal");
</script>
Explanation:
- data(data): Binds an array to the selection.
- .enter(): Handles data points without corresponding DOM elements.
- .append(“li”): Creates new list items dynamically based on data.
6. Updating Existing Elements
Example 5: Updating List Items
const newData = ["Updated 1", "Updated 2"];
d3.select("#list")
.selectAll("li")
.data(newData)
.text(d => d)
.style("color", "crimson");
Explanation:
- Binds new data to existing list items.
- Modifies text and styles without adding new elements.
7. Removing Elements
Example 6: Removing Unused Elements
d3.select("#list")
.selectAll("li")
.data(["Only Item 1"])
.exit()
.remove();
Explanation:
- .exit(): Selects elements without corresponding data.
- .remove(): Deletes unnecessary list items.
8. Chaining Selections
You can chain multiple operations on a selection for cleaner, more readable code.
Example 7: Chaining Modifications
d3.select("#chart")
.append("div")
.attr("class", "box")
.style("width", "150px")
.style("height", "150px")
.style("background", "lightblue");
Explanation:
- Multiple operations are chained to create and style a new div element dynamically.
9. Adding Transitions (Animation)
Example 8: Animated Bar Chart
<svg width="400" height="150"></svg>
<script>
const data = [30, 70, 50];
const svg = d3.select("svg");
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 100)
.attr("y", 150)
.attr("width", 80)
.attr("height", 0) // Start at 0 height
.transition() // Apply transition
.duration(1000)
.attr("y", d => 150 - d)
.attr("height", d => d)
.style("fill", "teal");
</script>
Explanation:
- Animates bar chart heights dynamically based on data.
10. Common Selection Methods
| Method | Description | Example |
|---|---|---|
| d3.select() | Selects the first matching element. | d3.select(“h1”) |
| d3.selectAll() | Selects all matching elements. | d3.selectAll(“p”) |
| .append() | Appends a new child element. | .append(“div”) |
| .attr() | Sets or gets attributes. | .attr(“class”, “box”) |
| .style() | Applies CSS styles. | .style(“color”, “red”) |
| .text() | Sets or gets the inner text. | .text(“Hello”) |
| .enter() | Creates placeholder for data points. | .enter().append(“li”) |
| .exit() | Removes elements without bound data. | .exit().remove() |
| .transition() | Animates transitions. | .transition().duration(1000) |
11. Conclusion
D3.js selections are the foundation of dynamic visualizations. By mastering selections, you can:
- Dynamically add, update, and remove elements.
- Bind data to DOM elements seamlessly.
- Create interactive and animated visualizations.