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

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

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>

Execution code:

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

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>

Still executed:

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

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>

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>

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; });

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>

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();

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();

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

See all articles