Question

我尝试了以下代码：

var data = [
  {name: "Locke", number: 4},
  {name: "Reyes", number: 8},
  {name: "Ford", number: 15},
  {name: "Jarrah", number: 16},
  {name: "Shephard", number: 31},
  {name: "Kwon", number: 34}
];

d3.selectAll("div")
  .data(data, function(d) { return d ? d.name : this.id; })
                           // it should return a value, right? Where is the return value stored? Why doing this? 
     .enter()
     .append('h4')
    .text(function(d) { return d.number; });

我不明白这行代码是做什么的：

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

应该对数据数组中的每个项执行回调函数，但那又是什么？他们为什么要这样做？存储的返回值在哪里？

这是附加的元素看起来，仍然没有返回值。这是official document for data() function。找不到解释。

Answer 1

data函数中第二个参数的documentation以给定文档开头：

<div id="Ford"></div>
<div id="Jarrah"></div>
<div id="Kwon"></div>
<div id="Locke"></div>
<div id="Reyes"></div>
<div id="Shephard"></div>

现在，要对现有的HTML结构应用数据：

var data = [
  {name: "Locke", number: 4},
  {name: "Reyes", number: 8},
  {name: "Ford", number: 15},
  {name: "Jarrah", number: 16},
  {name: "Shephard", number: 31},
  {name: "Kwon", number: 34}
];

所以你从选择开始：

d3.selectAll("div")

选择将返回文档中已存在的HTML元素列表。文档中的代码是：通过将数据中的number与元素的div匹配，将数据中的name插入相应的id，例如<div id="Ford">15</div>。

然而，d3并不知道如何匹配这些。如果您没有指定第二个参数，它将尝试使用您的元素按索引连接数据（数据中的第一个条目进入第一个元素，第二个条目进入第二个，等等）。所以，你会得到：

<div id="Ford">4</div>
<div id="Jarrah">8</div>
<div id="Kwon">15</div>
...

但是，如果您提供第二个参数，称为键函数，您可以告诉d3您希望插入这些数字的位置。

可以指定一个关键函数来控制将哪个数据分配给哪个元素，替换默认的按索引连接。对每个所选元素评估该关键函数，按顺序传递当前数据（d），当前索引（i）和当前组（节点），并将其作为当前DOM元素。然后还为数据中的每个新数据评估关键函数，传递当前数据（d），当前索引（i）和组的新数据，并将其作为组的父DOM元素。给定键的数据将分配给具有匹配键的元素。

// d is the current datum (the __data__ object on element, if any)
function(d) {
  // for every element let's see if there is a __data__ object;
  // existing elements that haven't been handled by d3 yet don't have it:
  return d ?
    d.name : // use `name` property from `data`
    this.id; // use element's id, same as this.getAttribute('id')
}

现在，使用上述功能作为键功能，您的HTML将如下所示：

<div id="Ford">15</div>
<div id="Jarrah">16</div>
<div id="Kwon">34</div>
<div id="Locke">4</div>
<div id="Reyes">8</div>
<div id="Shephard">31</div>

您可以在 DEMO 中使用它。我已经为关键功能添加了console次调用。请注意，它被调用了12次（每个元素6个，然后数据中每个数据（条目）6个）。前6个日志undefined因为这些元素尚未__data__。

返回值不会存储在任何地方。它被用于将元素与基准匹配，然后被丢弃。

d3js，.data（）中的第二个参数是一个函数是什么意思？

1 个答案: