D3.js“数据”函数的第一个参数是什么？答案

【问题标题】：What does D3.js "Data" function expect as its first argument?D3.js“数据”函数的第一个参数是什么？
【发布时间】：2014-05-05 17:59:43
【问题描述】：

我在尝试将数组组合到现有的 svg 地图上进行数据绑定时遇到了很多麻烦。

该数组包含具有name 属性的对象，该属性对应于d3 选择中svg 元素的id 属性。

我正在像这样进行数据连接：

mySelection.data(
  [
    {"name": "county1"},
    {"name": "county2"},
    {"name": "county3"}
  ],                 
  function (datum, index) {
    if (this.getAttribute("id") === datum["name"]) {
      return datum;
  });

但是，当我运行它时，我收到错误 Uncaught TypeError: Cannot read property 'name' of undefined。

我尝试使用调试器单步执行代码，在我看来问题是当 d3 调用我的键函数时，datum 参数为空。所以我只能假设它不喜欢数据数组的格式。

我已尝试阅读有关数据函数 here 的文档，但遗憾的是，除了它应该是“数据数组”之外，该函数期望其第一个参数的格式不是很清楚。

你能帮我弄清楚为什么我的数据绑定不起作用吗？

这是一个使用我的实际数据的 jsFiddle：http://jsfiddle.net/Racheet/GG3d5/

【问题讨论】：

标签： javascript data-binding d3.js

【解决方案1】：

.data() 的第二个参数是对myselection 中的每个数据元素和每个 DOM 元素执行的函数。它传递数据并假定返回允许匹配数据和 DOM 元素的任何内容。在您的情况下，这将是 .name。

您的示例没有任何数据绑定到元素，因此这不起作用。但是，您可以利用这一事实并检查是否存在数据绑定，如果没有，则返回 DOM 元素的 ID：

provinces.data(data, function(d) { return d ? d.name : this.getAttribute("id"); });

请注意，在此操作之后，DOM 元素将有数据绑定到它们，并且 key 功能应该按预期工作。完成演示here。

【讨论】：

我想我明白了，但我不是 100% 的。 key 函数在 data 数组和 elements 数组上运行，并且在这两种情况下都需要返回一个字符串。然后，D3 将获取这些字符串，然后在数据数组单元格的字符串和 html 元素的字符串对齐的任何情况下，它将一个绑定到另一个。我对么？那么这是否允许数组和元素之间的多对一绑定？
第一部分是正确的。例如，假设 key 函数为数据返回 ["foo", "bar", "foobar"]，为 DOM 元素返回 ["foo", "foobar", "bla"]。在这种情况下，"foo" 和 "foobar" 匹配（在更新选择中），"foobar" 仅在数据中但不在 DOM 中（将在输入选择中），"bla" 仅在 DOM 中但不是数据（将在退出选择中）。虽然没有多对一绑定，但第一个元素匹配（请参阅here 快速演示）。
再次感谢，这真的帮助我了解了正在发生的事情。