D3 键功能参数未定义答案

【问题标题】：D3 key function param undefinedD3 键功能参数未定义
【发布时间】：2020-02-04 19:43:52
【问题描述】：

我会用元素绑定数据

首先我选择我的元素

let trainSelect = svg.selectAll('.train-w-dir');

当我console.log(trainSelect) 时，我得到的元素不是空的

然后我绑定数据

trainSelect
        .data(schedules, function(d: ISchedule) {
          return d.train;
        })
        .enter()
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

我在包含对象数组的调试器上检查计划。但是在key函数里面didundefined我不明白为什么？

所以我收到错误Cannot read property 'train' of undefined

【问题讨论】：

你将 d 重命名为 ISchedule 所以你应该这样做 return ISchedule.train;
我正在定义它的类型，因为没有 ISchedule 我得到 TS 错误 Property 'train' does not exist on type 'unknown'
哦，原来你用的是 TS，之前没有标签所以是误导

标签： javascript typescript d3.js

【解决方案1】：

关键函数被评估两次：每个选择元素一次，每个数据一次。用docs（强调我的）的话来说：

为每个选定元素评估此键函数，依次传递当前数据 (d)、当前索引 (i) 和当前组（节点），其中 this 为当前的 DOM 元素（nodes[i]）；返回的字符串是元素的键。然后还为 data 中的每个新数据评估 key 函数，传递当前数据 (d)、当前索引 (i) 和组的新数据，并将 this 作为组的父 DOM元素;返回的字符串是数据的键。

如果您尚未将数据绑定到元素，则在对每个选定元素进行评估时，d 的第一次运行将是未定义的。

从您提供的代码中不清楚什么可能是您问题的最佳解决方案。您可以针对 key 函数中的未定义值提供保护措施，或者更好地重建将数据绑定到元素的方式。

【讨论】：

我错过了你的这个答案。 API就像你引用的那样总是困扰我，我认为它应该是：“这个关键函数按顺序为每个选定的元素评估，传递元素的数据（d） ...”，而不是“current”，这让我们认为它指的是数据的基准，而不是元素的基准。