"D3.js Starter Series---7" Understanding Update, enter, exit use

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

The following code is repeated in the previous sections, for example:

Svg.selectall ("rect")             . Data (DataSet)             . Enter ()             

The above code is typically used when the number of rect selected is less than the number of bound data datasets, and this section specifically says whenwhen the number of selected elements and data is inconsistentHow to deal with it.

This section will involve three functions.

1. Update () when the corresponding element is exactly satisfied (number of bound data = corresponding Element)

There is actually no such a function, just to be described with the subsequent enter and exit to imagine such a function. But the corresponding elements just meet, direct operation can be, followed directly with text, style and other operations can be.

2. Enter () when the corresponding element is insufficient (bound data quantity > corresponding Element)

When the corresponding element is insufficient, the element is usually added to the same amount as the number of bound data. The following usually operates first with append.

3. Exit () when the corresponding element is too large (number of bound data < corresponding element)

When the corresponding element is too large, it is usually necessary to delete the element so that it is equal to the number of bound data. The back is usually followed by the remove operation.

Here's a look at how to use it in detail:

<body><p>aaaaaaaaa</p><p>bbbbbbbbb</p><p>ccccccccc</p><script src=  "Http://d3js.org/d3.v3.min.js" charset= "Utf-8" ></script>  <script>var DataSet = [10, 20, 30, 40, 50 ];var update = D3.select ("Body"). SelectAll ("P"). Data (DataSet); var Enter  = Update;update.text (function (d,i) { Return "Update" + D;}); Enter.enter (). Append ("P"). Text (function (d,i) {return "enter" + D;});  </script>  </body>

The above code uses the variable name update and enter respectively to represent the respective part, the result of the above code is:

The result graph can see the part of the newly added element enter.
Change part of the code to see how to use Exit.

var dataset = [Ten,];var update = D3.select ("Body"). SelectAll ("P"). Data (DataSet); var exit  = Update;update.text (fu Nction (d,i) {return "update" + D;}); Exit.exit (). Text (function (d,i) {return "Exit";});

As you can see, when you call the exit () function, you actually return an element that has no corresponding data. Often we can remove extraneous elements, such as:

Exit.exit (). remove ();

In particular, the use of the Enter function is most visible. Since we often use D3 for data visualization, we all have the data we need and the amount of data is huge, and there are very few elements in the document that correspond to it. So be very skilled in the use of Enter

"D3.js Starter Series---7" Understanding Update, enter, exit use