javascript-d3How do I update data in d3.js?

Updating data in d3.js can be done with the .data() function. This function takes an array of data and joins it with the elements in the selection. The data is then passed through the enter, update, and exit selections, allowing you to add, modify, and remove elements accordingly.

For example, the following code block takes an array of data, binds it to the elements in the selection, and then uses the enter, update, and exit selections to update the elements accordingly.

var data = [4, 8, 15, 16, 23, 42];

d3.select("body").selectAll("p")
  .data(data)
  .enter().append("p")
  .text(function(d) { return "I’m number " + d + "!"; })
  .style("color", function(d) {
    if (d > 15) { return "red"; }
    else { return "black"; }
  });

This code will output six <p> tags with text saying "I'm number x!", where x is the respective number in the data array. The color of the text will be red if the number is greater than 15, and black otherwise.

The code can be broken down into the following parts:

var data = [4, 8, 15, 16, 23, 42]; - this declares an array of data to be used in the update.
d3.select("body").selectAll("p") - this selects all <p> tags in the <body> element.
.data(data) - this binds the data array to the selection.
.enter().append("p") - this appends a new <p> tag for each element in the data array.
.text(function(d) { return "I’m number " + d + "!"; }) - this sets the text of each <p> tag to "I'm number x!", where x is the respective number in the data array.
.style("color", function(d) { if (d > 15) { return "red"; } else { return "black"; } }); - this sets the color of the text to red if the number is greater than 15, and black otherwise.

For more information, you can check out the d3 documentation or this tutorial.

Edit this code on GitHub

More of Javascript D3

See more codes...