Home > Developer > Web Develop
Tag: Data key binding function
The data () function has two parameters, the first one is bound, and the second parameter specifies the order of the bindings. It is often used when the data needs to be updated.
By default, the data () function binds array items sequentially by index number. The No. 0 element binds the No. 0 item of the array, the 1th element binds the 1th entry of the array, and so on. You can also do this without binding in this order, which will use the second parameter of data (). This parameter is a function called the key function.
Note that you can use key functions to specify the order of bindings only if the selection set has already been bound with data. Take a look at the following code:
<body><!--Three empty P-elements--><p></p><p></p><p></p><script>//data var persons = [{id:3, Name: "Zhang San"},{Id:6, Name: "John Doe"}, {id:9, Name: "Harry"}];//Select all p elements in body var p = d3.select ("Body "). SelectAll (" P ");//Bind the data and modify the content of the P element p.data (persons). Text (function (d) {return d.id +": "+ D.name;}); </script></body>This code modifies the content of the P element, and the modified P element is:
<p>3: Zhang San </p><p>6: John Doe </p><p>9: Harry </p>
The following updates the data in persons and binds the data once again. This binding adds a key function:
Update data in persons persons = [{id:6, Name: ' Zhang San '}, {id:9, Name: ' John Doe '}, {id:3, name: ' Harry '}];//bind data according to the rules of the key function and modify Content p.data (persons, function (d) {return d.id;}). Text (function (d) {return d.id + ":" + D.name;});There is only one statement return d.id in the key function. Represents a key using the ID property of an array item. After modifying the contents of the P element with the data of this binding, the result is as follows:
<p>3: Harry </p><p>6: Zhang San </p><p>9: John Doe </p>
As you can see, the results are not arranged in the order of the New Persons Array (6: Zhang San, 9: John Doe, 3: Harry). As shown in binding procedure 1, the order of the bindings does not bind by index number, but instead makes the key values correspond in turn.
Figure 1
Thank you for reading.
Document Information"D3.js selection set and data detail-3" order of binding data
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
