Group elements

When you first see a Selection, it’s common sense to think of a Selection as a collection of DOM elements, but in fact, a Selection is an array of groups, and groups are arrays of DOM elements.

We can print a Selection instance:


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script src=".. /d3.js"></script>
<script>
    const body = d3.select('table')
    console.dir(body)
</script>
</body>
</html>
Copy the code

You can see that the structure of Selection is divided into _groups and _parents.

_parents is the parent element of selection.

The parent element of selection obtained using d3.select() d3.selectall () is HTML.

When using d3.selectAll(‘tr’).selectAll(‘ TD ‘), _parents is an array of the parent elements of each group.

When the selection.append() method is called on the Enter selection set, D3 does a special job of inserting the newly inserted element into the parent node of the group and replacing the placeholder with the newly inserted element.

_groups is a collection of DOM elements.

Using d3.select() d3.selectall () yields only one group in selection.

SelectAll () yields multiple groups, and all elements of the original selection will become the new selection group.

Select () does not change the group.

Empty elements

Empty elements can be stored in a group to indicate element missing. Empty elements are created when selection. Select cannot find a child element that matches the requirement. Because the SELECT method maintains the structure of the group, it fills in null where missing elements are. For example, in this example, only two of the four sections contain an aside element:

d3.selectAll('section').select('aside')
Copy the code

Many methods ignore empty elements, but index evaluates them.

data

When binding data with selection.data(), the data is stored on the __data__ property of the DOM element, and in the case of Enter, on the __data__ property of an object. After adding elements to the Enter selection set, D3 takes care of that for us.

Selection.data () defines data for each group, not for each DOM element: for a group, the data should be either an array or a function that returns an array. Therefore, a selection with multiple groups should also be an array with multiple subarrays.

D3 binds elements and arrays together with a unique key value, the simplest of which is an index. You just need to ensure that the key is unique in the group. When the index of data changes, we need to specify a key function.

selection.data(data, (data) => data.key)
Copy the code

Because we use key values to match DOM elements and data, three things can happen:

  • Update – For a given data, dom elements with the same key value want to correspond
  • Enter – There is no CORRESPONDING DOM element with the same key value for a particular data
  • Exit – For a DOM element, there is no corresponding data with the same key value

So in general we want to specify what to do in each case.