.join()

AntrikshDangi's avatar
AntrikshDangi's avatar
AntrikshDangi
Published Jul 30, 2024
Contribute to Docs

The .join() method in D3.js efficiently binds data, appends new elements for entering data, updates existing elements, and removes elements without corresponding data, returning a merged enter and update selection.

Syntax

selection.join(
  enter,
  update,
  exit
);
  • enter: Function specifying how to create new elements for entering data.
  • update: Function specifying how to update properties of existing elements based on data.
  • exit: Function specifying how to handle elements that no longer have corresponding data.

Example

Here’s a simple HTML code that demonstrates the use of .join():

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <script>
      const data = [1, 2, 3, 4];


      const selection = d3.select('body').selectAll('p').data(data);


      selection.join(
        (enter) => enter.append('p').text((d) => d), // Create new elements for enter selection
        (update) => update.text((d) => d), // Update existing elements for update selection
        (exit) => exit.remove() // Remove elements for exit selection
      );
    </script>
  </body>
</html>

In this example, if there are fewer p elements than data points, new p elements are created (enter selection). If there is an equal number, existing elements are updated (update selection). Excess elements are removed if there are more elements than data points (exit selection).

The output of the mentioned code is as follows:

d3 Selection .join()

All contributors

Contribute to Docs

Learn JavaScript:D3 on Codecademy