D3.js data binding - data(), enter()

Data binding and usage. data(), enter(), attr(), style()

How to bind data

D3 supports many data formats and provides methods for reading files such as CSV and JSON.

Here, prepare the following simple sample data set.

var dataset = [ 1, 2, 3, 4, 5 ];

Now connect the data and elements with the code below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      // Write code here.
      var dataset = [ 1, 2, 3, 4, 5 ];
    </script>
  </body>
</html>

First, decide which element to connect to.

d3.select("body").selectAll("p")

This selects the  elements inside the <body> tag.

However, the  tags you want to select do not exist yet. This is where D3’s distinctive approach is used. Select elements that do not exist yet, and use enter() to add them. The final method chain is as follows:

d3.select("body").selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text("Hello!");

Looking at what this method chain does, it first searches the page for the <body> tag.

d3.select("body")

Then it passes the reference to the next method.

.selectAll("p")

It searches for  elements inside the referenced <body> and passes them on. Because they do not exist yet, an empty selection is passed to the next method.

.data(dataset)

This counts and analyzes the data. Here, five values are set.

.enter()

To create new elements bound to data, you must use enter(). This method checks the target elements on the page and the data passed next.
If there are more data values than target elements, it creates temporary reference locations and passes those references to the next method.

.append("p")

This receives the temporary reference locations created by enter() and inserts  elements into the page. It then passes references to the created elements to the next method.

.text("Hello!")

This receives references to the newly created  elements and inserts text values.

The final code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      // Write code here.
      var dataset = [ 1, 2, 3, 4, 5 ];
      d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("p")
        .text("Hello!");
    </script>
  </body>
</html>

When you run it, five Hello! strings are displayed as shown below.

If you inspect the page with Google Chrome Developer Tools, you can see that five p tags have been added as follows.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      // Write code here.
      var dataset = [ 1, 2, 3, 4, 5 ];
      d3.select("body").selectAll("p")
        .data(dataset)
        .enter()
        .append("p")
        .text("Hello!");
    </script>
    <p>Hello!</p>
    <p>Hello!</p>
    <p>Hello!</p>
    <p>Hello!</p>
    <p>Hello!</p>  
</body>
</html>

How to use data

This section explains how to use bound data.

First, prepare the data to bind.

var dataset = [ 1, 2, 3, 4, 5 ];

Use a function as the argument inside the method below.

For example, suppose you have the following code:

d3.select("body").selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text("Hello!");

Change the final text() line as follows:

  .text(function(d) { return d; });

Then it is displayed as follows.

After calling data(), you can create functions that receive the input values inside chained methods at any time.

A JavaScript function is written in the following form.

function (inputValue) {
    // Put processing code here.
    return outputValue;
}

When using data in D3, you must declare d as the input value. If you do not declare d as the input value, you cannot reference the bound data.

Using a function as the argument also allows processing like this:

.text(function(d) {
    return "This value is " + d;
});

By changing the processing inside the function, you can perform many kinds of operations.

Setting attributes

When combined with other D3 methods such as attr() and style(), you can set HTML and CSS attributes.

For example, if you add a style-related function to the code as follows, the configured content is reflected in the elements.

d3.select("body").selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text(function(d) {
    return "This value is " + d;
  })
  .style("color", "red");

All text has changed to red.

Here as well, you can use a function to change the color depending on the data.

.style("color", function(d) {
  if (d % 2 == 0) {
    return "red";
  } else {
    return "black";
  }
});

When d divided by 2 leaves a remainder of 0, in other words when d is even, the color changes to red.