【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序

data() 函数有两个参数，第一个是被绑定数据，第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。

默认的情况下，data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项，第1个元素绑定数组的第1项，依此类推。也可以不按照此顺序进行绑定，这就要用到data()的第二个参数。这个参数是一个函数，称为键函数（key function）。

要注意，只有在选择集原来已经绑定有数据的情况下，才能使用键函数指定绑定的顺序。请看以下代码：

[javascript]view plain copy
<body>  
      <!-- 三个空的p元素 -->  
        <p></p>  
        <p></p>  
        <p></p>  
     <script>  
//数据  
        var persons = [ { id: 3 , name:"张三" },  
                        { id: 6 , name:"李四" },  
                        { id: 9 , name:"王五" }];  
  
//选择body中的所有的p元素  
        var p = d3.select("body").selectAll("p");  
  
//绑定数据，并修改p元素的内容  
        p.data(persons)  
            .text(function(d){  
                return d.id + " : " + d.name;  
            });  
     </script>  
</body>  

这段代码对p元素的内容进行了修改，修改之后的p元素为：

[javascript]view plain copy
<p>3 : 张三</p>  
<p>6 : 李四</p>  
<p>9 : 王五</p>  

下面将persons里的数据更新，再绑定一次数据。本次绑定添加键函数：

[javascript]view plain copy
//更新persons里的数据  
persons = [     { id: 6 , name:"张三" },  
                { id: 9 , name:"李四" },  
                { id: 3 , name:"王五" }];  
  
//根据键函数的规则绑定数据，并修改内容  
    p.data(persons, function(d){ return d.id; })  
            .text(function(d){  
                return d.id + " : " + d.name;  
            });  

键函数里只有一个语句return d.id。表示使用数组项的id属性作为键。使用本次绑定的数据修改p元素的内容后，结果如下：

[javascript]view plain copy
<p>3 : 王五</p>  
<p>6 : 张三</p>  
<p>9 : 李四</p>  

可以看到，结果并没有按照新persons数组的次序（6：张三、9：李四、3：王五）排列。绑定过程如图1所示，绑定的顺序不按照索引号绑定，而是使键值依次对应。

图1

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

猜你喜欢

【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序