Question

我在尝试将数组绑定到现有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的文档，遗憾的是，除了应该是“数据数组”之外，它还不清楚函数对第一个参数的期望格式。 / p>

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

以下是使用我的实际数据的jsFiddle：http://jsfiddle.net/Racheet/GG3d5/

Answer 1

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

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

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

请注意，在此操作之后，DOM元素将绑定到它们的数据，并且键函数应按预期工作。完整演示here。

什么D3.js＆＃34;数据＆＃34;函数期望作为它的第一个参数？

1 个答案: