D3.js library -3- Further understanding of UPDATE, Enter, exit in D3

Update, Enter, and exit functions

Update, Enter, and Exit are important and key concepts in D3.js. The three of them mainly deal with the matching problem between the number of data sets and the number of selection sets.

Diagram the relationship between the three

The illustration above:

1. Green: If the specified data is equal to the data in Nodes, the updata operation is performed
2. Blue: If the number of elements in the array is greater than the number of elements in the node, proceedupdateandenteroperation
3. Orange: If there are not enough numbers in the given dataupdateandexitoperation

Code interpretation

update

1. The sum of the numbers in a given arrayDOMIf the number of are equal, proceedupdateOperation, turns red, updates data.
2. The operation that turns green in the Enter () method is not done

Update and enter

1. The number of elements given is 2, the number of extra elements in the DOM

2. Run the update and Enter operations simultaneously

   • Red: the update

   • Green: the enter

The update, the exit

1. The number of elements in a given array is less than the number in the DOM (2)
2. The update and exit operations are also executed
   • Red: the update
   • Blue: the exit

$\color{red}{exit section is usually performed by the remove operation, directly delete}$

🏆 technology project phase iii | data visualization of those things…