Web Front-end
JS Tutorial
Detailed explanation of data(), enter() and exit() problems in D3.js_javascript skills
Detailed explanation of data(), enter() and exit() problems in D3.js_javascript skills
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 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
Build Your Own AJAX Web Applications
Mar 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
10 jQuery Fun and Games Plugins
Mar 08, 2025 am 12:42 AM
10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
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.
jQuery Parallax Tutorial - Animated Header Background
Mar 08, 2025 am 12:39 AM
This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
How do I optimize JavaScript code for performance in the browser?
Mar 18, 2025 pm 03:14 PM
The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
Auto Refresh Div Content Using jQuery and AJAX
Mar 08, 2025 am 12:58 AM
This article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona
Getting Started With Matter.js: Introduction
Mar 08, 2025 am 12:53 AM
Matter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a
