Introduction to the v5 version of D3.js (Chapter 4) - Understanding Update, Enter, Exit

D3.js v5 introductory tutorial (Chapter 4)

Update, Enter, Exit are very important concepts in D3.js. Let's talk about what they are? (When you read it. You will know what D3.js will do if you use data() when the number of datasets and the number of selections do not match)

When using data(), for example now we have an array [3,6,9,12,15], we can bind each item of the array to a , but, now there is a problem - data What should I do if the number of sets does not match the number of selection sets? In this way, you need to understand Update, Enter, Exit

Example 1: update and enter: The array [3,6,9,12,15] is bound to three . It is conceivable that the last two elements of the array have no elements that can be bound. At this time, D3 will create two empty elements relative to the last two data of the array, then this part is called Enter. The part with elements corresponding to the data is called Update

Example 2: exit: If the array [3] is bound to three s, it is conceivable that the last two s have no bindable data, then the part without data binding is called Exit

As shown below

1. Use of Update and Enter

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    
    <script>
    	var dataset = [3,6,9,12,15];
    	var p = d3.select("body")
    		.selectAll("p");
    	var update = p.data(dataset)//Bind the data and get the update part
    	var enter = update.enter();//Get the enter part
    	//Check if it really gets
    	//processing for update
    	update.text(function(d,i){
    		return "update: "+d+",index: "+i;
    	})
    	//processing for enter
    	//Note that you need to add enough <p> first, and then add text
    	var pEnter = enter.append("p")//Add enough <p>
    	pEnter.text(function(d,i){
    		return "enter: "+d+",index: "+i;
    	})
    </script>
  </body>

operation result:

Code description:

-var update = p.data(dataset) means to bind data and get the update part,

-var enter = update.enter() means get to the enter part

-var pEnter = enter.append("p")//添加足够多的
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;

}) means adding enough and setting the text

2. Use of Update and Exit

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    <p>rat</p>
    
    <script>
    	var dataset = [3.6];
    	var p = d3.select("body")
    		.selectAll("p");
    	var update = p.data(dataset)//Bind the data and get the update part
    	var exit = update.exit();//Get the exit part
    	//Check if it really gets
    	//processing for update
    	update.text(function(d,i){
    		return "update: "+d+",index: "+i;
    	})
    	//The processing of exit is usually delete, but I didn't do that here   	
    	exit.text(function(d,i){
    		return "exit";
    	})
    </script>
  </body>

operation result:

Code description:

- What needs to be explained here is: after getting the exit part, you don't need to use append("xx") to add elements, but enter is needed, so it's easy to understand. Also, the processing of the exit part is usually to delete exit.remove(); (not mentioned here, will be explained in detail in the next chapter)

Introduction to the v5 version of D3.js (Chapter 4) - Understanding Update, Enter, Exit

Guess you like