Detailed explanation of data(), enter() and exit() problems in D3.js

Detailed explanation of data(), enter() and exit() problems in D3.js_javascript skills

WBOY

Release： 2016-05-16 15:44:55

Original

1116 people have browsed it

D3 is widely used and has now become one of the mainstream data visualization tools. When everyone first came into contact with d3.js, the most difficult parts were the operations of data(), enter(), and exit().

After I have been in contact with it for a period of time and gained some understanding, I would like to briefly talk about my understanding.

data()

Let’s look at an example first:

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

Copy after login

Execution code:

d3.select("body").selectAll("p").data([1, 2, 3])

Copy after login

Here, data() is used to bind data to the selected DOM element. In this way, you can do some related operations on the data, such as setting the element width, etc.

On the surface, no changes can be seen. But internally, it adds a __data__ attribute to the corresponding DOM element, which can be seen through document.getElementsByTagName("p")[0].__data__.

enter() and exit()

These two operations are confusing because it is difficult to deduce what they do from their names alone.

In the above example of data(), the number of our DOM elements and data are the same. But if it's different, what should we do?

enter() and exit() are used to handle this situation.

enter()

When the number of DOM is less than the number of data, or there is none at all, we usually want to let the program help create it.

In the following example, we do not provide DOM elements in advance:

<body>
</body>

Copy after login

Still executed:

d3.select("body").selectAll("p").data([1, 2, 3])

Copy after login

The difference from the above example is that in the above example we can continue to perform operations such as .style("width", "100px"). But we can't do that here, because we haven't selected the DOM element and need to create it first.

enter() is used to select the missing part of DOM elements after binding data. We may wonder, since it is the missing part, how to choose? Here we need to use a little imagination and imagine that we have chosen something that does not exist. We can call it "virtual DOM" or "placeholder".

enter() only makes a selection and does not actually add the required DOM elements. Therefore, after enter(), append() is usually used to actually create the DOM element.

From now on, we use d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") to Automatically create the required DOM elements.

How to handle enter

If there are not enough elements, the usual approach is to add elements using append(). Please look at the code below:

<body> 
  <p></p> 
  <script> 
  var dataset = [3, 6, 9]; 
  var p = d3.select("body").selectAll("p"); 
//绑定数据后，分别获取update和enter部分 
  var update = p.data(dataset); 
  var enter = update.enter();   
//update部分的处理方法是直接修改内容 
  update.text( function(d){ return d; } ); 
//enter部分的处理方法是添加元素后再修改内容 
  enter.append("p") 
   .text(function(d){ return d; }); 
  </script> 
 </body>

Copy after login

In this example, there is only one p element in the body, but there are three data, so the enter part contains two extra data. The method to deal with redundant data is the append element, which corresponds to it. After processing, there are three p elements in the body, the contents of which are:

<p>3</p> 
<p>6</p> 
<p>9</p>

Copy after login

Usually, after reading the file from the server, the data is there, but there are no elements in the web page. This is a very important feature of D3, that is, you can select an empty set and then use enter().append() to insert elements. Assuming there is no p element in the body now, please see the following code:

var dataset = [10,20,30,40,50]; 
var body = d3.select("body"); 
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集 
 .data(dataset)  //绑定dataset数组 
 .enter()   //返回enter部分 
 .append("p")  //添加p元素 
 .text(function(d){ return d; });

Copy after login

In the above code, selectAll selects an empty set and then binds the data. Since the selection set is empty, the update part returned by data() is empty. Then call enter() and append() so that each data has an element p corresponding to it. Finally, change the content of the p element. That is, the common way to deal with the enter part is to use append() to add elements.

exit()

Contrary to enter(), exit() is used to select those DOM elements that are extra compared to the data.

In the following example, we provide one more DOM element:

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

Copy after login

This time it is easy to understand, because it is extra, then it actually exists, that is, the last

If there are more, we can then use .remove() to remove these elements. The code is as follows:

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

Copy after login

How to handle exit

There are too many elements and no data corresponding to them. For such elements, the usual approach is to use remove() to delete the element. Assuming there are 5 p elements in the body, please see the following code:

var dataset = [10, 20, 30]; 
 var p = d3.select("body").selectAll("p"); 
//绑定数据之后，分别获取update部分和exit部分 
 var update = p.data(dataset); 
 var exit = update.exit(); 
//update的部分的处理方法是修改内容 
 update.text( function(d){ return d; } ); 
//exit部分的处理方法是删除 
 exit.remove();

Copy after login

In this code, the exit part is processed by deletion. After deletion, there will be no redundant p elements in the web page.

Reference materials

"Thinking with Joins" - by Mike Bostock