d3 .data键最初返回undefined

Question

我试图在d3中绑定数据时使用可选的键功能.我有一个本地测试数据集,我试图使用每个对象的"标题"属性作为键.

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

这是我的对象和几行代码(我使用'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

第一个日志未定义:

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

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

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

 '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属性时,它会抛出错误,因为它没有任何数据.如果您的选择当前没有任何绑定到它的数据,可能很难有效地使用键功能(尽管您可以对索引执行某些操作),所以我猜测您的用例不是关键功能的意图对于.