Data Join in D3.js
2020-09-18 06:37:06

Data Join in D3.js

Introduction to Data Join

In D3.js, Data Join is an essential aspect. It works for the selection and allows you to manipulate the HTML document according to the given data sets. The data sets may contain a sequence of numerical values. By default, the data set provides the priority to the methods, and the items of data sets are correlated to HTML elements.

Here, the detailed description of Data Join is given below:

What is Data Join

Data Join can be defined as a relationship between the data and graphical elements, making the data-driven modifications of elements genuine. Data Join helps you to insert, remove, and modify the elements (includes SVG and HTML elements), depending on the data set of the current HTML document. It helps you to build a relation between your data and graphical elements of the HTML document.

When you manipulate the data set, the correlated element can also be changed. You can simply and easily manipulate the elements of the data set.

Working with Data Joins

The dominant aspiration of Data join is to map the current document elements along with the data set. The Data joins also generate the virtual representation of the HTML document according to the existing data sets. It also facilitates you with the methods to work with virtual representation.

Here, we have an example of the data set given below-

[5, 10, 15, 20, 25, 30]

In the above-given data set, we have six items. These can be mapped to six elements of the HTML document. Now, we will map these elements to the li element with the help of data () method of data join, and the selectAll () method of selector.  

HTML Code

<ul id  = “list” >
<li></li>
<li></li>=pokjb </ul>

D3.js Code

d3.select (“#list”). SelectAll (“li”).data ([5,10, 15, 20, 25, 30]);

As you know that we have six elements (virtual) present in the HTML document. Now, we consider the first two elements as the li elements, as shown in the below code:

  1. li – 5
  2. li – 10  

Here, you can use selector’s element methods such as text(), style(), attr(), etc., for the first two li elements as shown below:

d3.select (“#list”).selectAll(“li”)
.data ([5,10, 15, 20, 25, 30])
.text(function (D1) {  return D1;  });

In the above code, the text() method helps to obtain the mapped data of li elements. Here, D1 presents the 5 and 10 for first and second li elements.

You can easily map the next four elements with the help of the selector’s append() method and Data join’s enter() method. The selector’s append() method helps you to create the new element set from the related data, and Data join’s enter() method provides you the access to the enduring elements (not mapped to the existing elements).

Now, you can generate the li for the enduring data elements as shown below-

  • li – 15
  • li – 20
  • li – 25
  • li – 30

D3.js code for creating a new li element-

d3.select (“#list”).selectAll(“li”)
.data ([5,10, 15, 20, 25, 30])
.text(function (D1) { return  “This is an existing element and the value is ” +D1;  })
.enter()
.append(“li”)
.text (function (D1) { return  “This is a newly created element and the value is ” +D1;  });

Exit() method

You can also use the exit() method provided by the Data join to discard the data elements dynamically as given in the below code:

d3.selectAll(“li”)
.data([5, 10, 15, 20])
.exit()
.remove()

In the above given code, we removed the fifth and sixth data elements from the data sets and its correlated li with the help of remove() and exit() methods.

Example

Here, we have an example to understand all the methods of Data Join:

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Times New romen; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth and fifth value"
onclick = "javascript:remove()" />     
<script>
d3.select("#list").selectAll("li")
.data([5,10,15,20,25,30])
.text(function(D1)
 { return "This is an existing element and the value is " + D1; })
  .enter()
  .append("li")
  .text(function(D1)
  { return "This is newly created element and the value is " + D1; });
function remove() {
   d3.selectAll("li")
  .data([5,10,15,20])
  .exit()
  .remove()
   }
</script>
</body>
</html>    

Output

After the execution of the above source code, you will get the following output as shown in below snippet:

Data Join in D3.js

When you click on the Remove fifth and sixth value button given in the above screenshot, you will get the following modification in your output.

Data Join in D3.js

After clicking on the button, you will get the output, in which the fifth and the sixth data items of data set are removed.