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

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

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

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

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

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

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

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

4-4-12

图1

谢谢阅读。

文档信息

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序》上有6条评论

  1. 亲爱的博主
    本页面(http://www.ourd3js.com/wordpress/811),即《精通D3.JS》一书中第75页,关于绑定的顺序小节中data()第二参数:键函数的使用,代码– p.data(persons, function(d){ return d.id; })–中–d–被浏览器认为其未定义。

    • 您好,感谢您购买本书。

      关于这个问题,是我没解释清楚。可能您没有注意到上面有这一句话:下面将persons里的数据更新,再绑定一次数据。

      也就是说,必须要原来存在一个数据,绑定之后,更新数据,再用 id 作为键绑定才行。例如:

      是这样结合起来用的。
      抱歉,我在这里确实没解释清楚。

      • 嘻嘻
        解决 是否选择集无数据绑定无法使用“d”这个变量
        data() 中在给出key function的时候 选择集p尚未绑定数据(我的代码)

      • 看到 “只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序” 这句话了

  2. 清晰透彻,每一篇文章对我都有帮助,谢谢!

评论已关闭。