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

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Custom Google Search API Setup TutorialMar 04, 2025 am 01:06 AM

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

What is 'this' in JavaScript?Mar 04, 2025 am 01:15 AM

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

See all articles