d3 data()数据绑定中的key函数

最新推荐文章于 2023-07-16 19:06:33 发布

weixin_30729609

最新推荐文章于 2023-07-16 19:06:33 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuanmanstein/p/9939476.html

本文介绍了一个使用D3.js进行数据绑定的例子，展示了如何将数据数组与DOM元素关联，通过选择器和数据函数实现数据驱动的文档更新。此过程涉及数据与元素的键函数匹配，对于未绑定数据的元素，数据为null，而对于新数据，数据则非null。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网https://github.com/d3/d3-selection/blob/master/README.md#selection_data

var data = [
  {name: "Locke", number: 4},
  {name: "Reyes", number: 8},
  {name: "Ford", number: 15},
  {name: "Jarrah", number: 16},
  {name: "Shephard", number: 31},
  {name: "Kwon", number: 34}
];

d3.selectAll("div")
  .data(data, function(d) { return d ? d.name : this.id; })
    .text(function(d) { return d.number; });

This example key function uses the datum d if present, and otherwise falls back to the element’s id property. Since these elements were not previously bound to data,

the datum d

is null when the key function is evaluated on selected elements,and

non-null when the key function is evaluated on the new data.