Javascript d3.数据键最初返回时未定义

我试图在d3中绑定数据时使用可选键函数。我有一个本地测试数据集，我试图使用每个对象的“title”属性作为键

当我的数据数组中只有3个对象时，key函数似乎运行了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

 .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'

在控制台中提供此输出：

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

 .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'

尝试console.log“d”而不是“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

 .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'

第一个日志未定义：

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

 .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'

当我尝试实际设置我认为应该设置的键时：

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

 .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'

我在第一次调用键函数时遇到类型错误：

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

 .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'

---

据我所知，当您使用键函数运行

data（）

时，它会执行以下操作：

在正在调用的选择中的每个节点上运行键函数

data（）

on

对作为第一个参数传递给

data（）

的每个数据值运行key函数

匹配结果。原始选择中数据值不匹配的节点将成为

exit（）

选择的一部分（因为您通常希望将其删除）。与原始选择中的任何节点都不匹配的数据值进入

enter（）

选择（因为如果要对它们执行任何操作，需要为它们创建节点）。与原始选择中的节点匹配的数据值绑定到这些节点，这些节点位于

update（）

选择中

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

---

我猜是d3.selectAll（“.slider image”）要么是空的，要么只包含一个以前没有绑定任何数据的节点。因此，key函数在其上运行，返回undefined，然后在每个传入数据值上运行。当您请求原始选择的数据的title属性时，它会抛出一个错误，因为它没有任何数据。如果您的选择当前没有任何数据绑定到某个键函数，那么可能很难有效地使用该键函数（尽管您可以使用索引），因此我猜您的用例不是该键函数的预期用途。

只有当您具有类“slider image”的元素时，才会发生错误没有数据绑定到它们的。在这种情况下，使用键函数是没有意义的——您应该首先将数据绑定到所有要使用的元素，然后使用键函数进行选择和数据匹配。这是我的问题，但我正在尝试使用键设置选择的原始数据。我是否应该将数据绑定到对象，然后在进行更新时使用key函数？是的-我非常确定key函数仅用于更新已经绑定了数据的选择。有什么原因需要按特定顺序绑定第一组数据吗？我想我的问题是，在尝试使用key函数绑定数据之前，我已经使用纯javascript将我的第一个“.slider image”添加到DOM中。我认为如果它还没有在DOM中，那么对于3个数据值，key函数只会被调用3次。然后我可以使用enter（）添加元素。我应该在原来的帖子里说。我仍然不知道是否需要使用键函数…我必须尝试在数据绑定之前不将其添加到DOM中。如果您只想为每个值绑定一个.slider图像，则绝对不需要使用键函数。