DEV Community

loading...
Cover image for D3 Building Blocks #1: Using D3 Methods to Manipulate the DOM

D3 Building Blocks #1: Using D3 Methods to Manipulate the DOM

jessesbyers profile image Jesse Smith Byers Updated on ・3 min read

When I first started exploring D3, I focused on projects. I followed a few tutorials by awesome D3 programmers such as Curran Kelleher's 13-hour D3.js course and Shirley Wu's Introduction to D3.js. I learned to make bar charts, represent data on maps, and represent weather data with cool flower icons that I designed myself. But although I could build stuff, I really didn't feel like I had a strong grasp of how D3 actually worked, because I had jumped straight to projects without focusing on the basics. In this series, I hope to help others avoid this pitfall.

Introduction to D3.js

D3.js is a JavaScript library that allows us to manipulate the DOM (Document Object Model) using data. It is often used as a flexible way to represent various types of data in the form of data visualizations. These representations might include bar charts, line graphs, maps...the list goes on. Click here to see a gallery of examples of all of the amazing things you can do with D3!

While there are a number of other libraries and frameworks that can allow us to visualize data, D3 is a great choice because it is so flexible, and the possibilities for visualization are virtually endless.

Using D3 Methods to Manipulate the DOM

To get started, we need to learn a few basic D3 methods that will allow us to interact with the DOM (Document Object Model). We will learn how to select elements, add elements, and remove elements.

Selections

select

The first method is the select method. The select method allows us to select and return a node from the DOM by specifying its tag name, class, or id (among other properties). We can return a node that already exists, or return a new node.

select Syntax Examples:

d3.select("h1"); 
//selects the node with the <h1> tag

d3.select("div.header"); 
//selects the <div> element with the class "header"

d3.select("#root"); 
//selects the node with the id "root"
Enter fullscreen mode Exit fullscreen mode

We will primarily be using select in order to select a node, and then apply a number of methods to it to transform the contents and style of that node.

selectAll

Similar to the select method, the selectAll method allows us to return a collection of nodes from the DOM, and then apply methods to the entire collection. Again, this method can return a collection of existing nodes, or select new nodes that do not yet exist.

selectAll Syntax Examples:

d3.selectAll("p"); 
//selects all of the nodes with the <p> tag

d3.selectAll("div.summary"); 
//selects all of the <div> elements with the class "summary"
Enter fullscreen mode Exit fullscreen mode

Modifying Elements

append

The append method is used to add an element to an already selected node. By default, the new element will be added at the bottom of the selected node, but additional selectors can be used to specify where exactly the new element should be added.

append Syntax Examples:

d3.select("div") 
  .append("p");
//selects the node with the <div> tag and adds a <p> tag as its child

d3.selectAll("div.summary")
  .append("p .summary_text"); 
//selects all of the <div> elements with the class "summary", and adds a <p> tag with the class "summary_text" as its child
Enter fullscreen mode Exit fullscreen mode

remove

As expected, the remove method can be used to remove an element (or elements) that have been selected.

remove Syntax Examples:

d3.selectAll("p")
  .remove(); 
//selects all of the nodes with the <p> tag, and removes them from the DOM

d3.select("div#summary")
  .remove();
//selects the <div> element with the class "summary", and removes it from the DOM
Enter fullscreen mode Exit fullscreen mode

text

The text method is used to set the text content of an element. It can take in an argument of a simple string, or a function that can be evaluated to set text dynamically.

text Syntax Examples:

d3.select("p") 
  .text("New Text!");
//selects the <p> tag and sets (or resets) the text to "New Text!"

d3.selectAll("h3")
  .text("Summary");
//selects all of the <h3> elements and sets (or resets) the text to "Summary"
Enter fullscreen mode Exit fullscreen mode

These are just a few of the basic methods for selecting and modifying DOM elements, and there are many more in the documentation.
To learn more about these methods, consult the D3.js Documentation at the links below:

D3 Documentation:

Discussion (0)

pic
Editor guide