d3 .data键最初返回undefined

Question

我在d3中绑定数据时尝试使用可选键功能。我有一个本地测试数据集，我正在尝试使用＆＃34;标题＆＃34;每个对象的属性作为关键。

当我的数据阵列中只有3个对象时，键功能似乎运行了4次。在d3文档中说，绑定数据时可能会多次调用数据键函数，我只是不明白我做错了什么。

这是我的对象和几行代码（我使用＆＃39; console.log（i）＆＃39;来说明我的困惑）：

test:[
  {
    "desc":"This it the first test description text.",
    "image":"test1.jpg",
    "title":"Test Project 1"
  },
  {
    "desc":"This is the second test decription text.",
    "image":"test2.jpg",
    "title":"Test Project 2"
  },
  {
    "desc":"This is the third test decription text.",
    "image":"test3.jpg",
    "title":"Test Project 3"
  }
]  

console.log(obj.testJSON.test[0].title);   //line 178
console.log(obj.testJSON.test);   //line 179

d3.selectAll(".slider-image")
 .data(obj.testJSON.test, function(d,i) {console.log(i); return d; });   //line 182

这会在控制台中显示此输出：

尝试使用console.log＆＃39; d＆＃39;而不是＆＃39; i＆＃39;

 .data(obj.testJSON.test, function(d,i) {console.log(d); return d; });   //line 182

第一个日志未定义：

当我尝试实际设置密钥时，我认为它应该是：

  d3.selectAll(".slider-image")
   .data(obj.testJSON.test, function(d) {return d.title; });
  }

第一次调用键功能时出现类型错误：

 'Uncaught TypeError: Cannot read property 'title' of undefined'

Answer 1

据我了解，当您使用关键功能运行data()时，它会执行以下操作：

1. 在您正在呼叫data()的选择中的每个节点上运行关键功能。
2. 在传递给data()的每个数据值上运行关键函数作为第一个参数。
3. 匹配结果。原始选择中没有数据值匹配的节点将成为exit()选择的一部分（因为您经常想要删除它们）。与原始选择中的任何节点不匹配的数据值都会进入enter()选择（因为如果您想对它们执行任何操作，则需要为它们创建节点）。匹配原始选择中的节点的数据值将绑定到那些放置在update()选择中的节点。

为了使其正常工作，您需要键才能成为原始选择中的节点和新数据值的函数。

我的猜测是d3.selectAll(".slider-image")是空的，还是只包含一个之前没有绑定任何数据的节点。因此，关键函数在其上运行，返回undefined，然后在每个传入的数据值上运行。当您要求原始选择的数据的title属性时，它会抛出错误，因为它没有任何数据。如果您的选择当前没有任何数据绑定到它（虽然您可以对索引执行某些操作），但可能很难有效地使用关键功能，所以我猜测您的用例不是＆n ＃39; t关键功能的用途。