javascript - d3 .data 键最初返回未定义

Question

我在 d3 中绑定(bind)数据时尝试使用可选的键功能。我有一个本地测试数据集，我正在尝试使用每个对象的“标题”属性作为键。

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

这是我的对象和几行代码(我使用 'console.log(i)' 来说明我的困惑):

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 'd' 而不是 'i' 时:

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

第一个日志未定义:



当我尝试实际设置 key 时，我认为它应该是:

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

第一次调用关键函数时出现类型错误:

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

Answer 1

据我了解，当您运行 data()通过一个关键功能，它执行以下操作:

在您正在调用的选择中的每个节点上运行关键函数 data()上。

对您传递给 data() 的每个数据值运行 key 函数作为第一个论点。

匹配结果。原始选择中数据值不匹配的节点成为 exit() 的一部分选择(因为您经常想摆脱它们)。与原始选择中的任何节点都不匹配的数据值进入 enter()选择(因为如果你想对它们做任何事情，你需要为它们创建节点)。与原始选择中的节点匹配的数据值绑定(bind)到这些节点，这些节点放置在 update() 中。选择。

为了使其工作，您需要 key 成为一个函数，该函数将在原始选择中的节点和新数据值上工作。

我对发生的事情的猜测是 d3.selectAll(".slider-image")要么是空的，要么只包含一个之前没有绑定(bind)任何数据的节点。所以 key 函数在它上面运行，返回 undefined，然后在每个传入的数据值上运行。当您询问原始选择数据的标题属性时，它会引发错误，因为它没有任何数据。如果您的选择当前没有绑定(bind)任何数据(尽管您可以对索引做一些事情)，那么可能很难有效地使用键功能，所以我猜您的用例不是键功能的意图为了。