Skip to Content
Learn
Introduction to D3
Chaining and Returning

Before we wrap up, let’s take a second to analyze the chaining syntax that is a D3 signature.

In the previous exercise, we referenced the following code:

let dataset = [55,34,23,22,59]; d3.select("body") .selectAll("div") .data(dataset) .enter() .append("div") .text("Some text");

At first, this style may just seem like one big chain! But the key takeaway is that the methods that precede others in the chain return what is needed for the next step in the chain. By chaining, you can save some lines of code in your program.

You’ll see that the d3 community will indent some parts of the chains with four spaces, and other parts of the chain with two. The lines with two spaces indicate that the selection has changed:

var h1 = d3.selectAll("section") .style("background", "steelblue") .append("h1") .text("Hello!");

Instructions

1.

Indent the .append() method, to indicate changes to the selection from the inserted div elements, by only indenting that line two spaces and not four.

Folder Icon

Sign up to start coding

Already have an account?