Javascript 如何为d3可折叠树中的节点分配唯一id

作为d3和javascript的新手，我试图通过查看

具体来说，我不理解以下语句如何以及为什么在节点更新后成功地将唯一id分配给节点

//更新节点

  var node = svg.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });

我的理解是节点是一个数组，这个数组有一个关联的索引i。 每次更新节点时，上面的语句都会使用从数组索引i派生的id的唯一键值将新节点（如在数据中）与网页上的节点（如在视觉表示中）绑定。如果节点数组的元素没有id，则将为其分配++i

这就是我感到困惑的地方。假设第一个节点数组有4个元素，因此每个元素的id分别为1、2、3和4。我折叠树，现在新的节点数组有3个元素，正好是第一个节点数组的前三个元素。这些元素的id为1、2和3。到目前为止没有问题

现在，下一个更新的节点数组有4个元素，前3个元素相同，第4个元素不同。 上述代码正确地将id 5分配给第四个元素

我的理解是

最后一个节点数组有4个元素

这个新的第四个元素的索引i=3，并且

++i=4

因此，上面的语句应该为第四个元素分配了一个id 4

但代码将id指定为5。当我在firebug调试器中检查I的值时，我会上升到4，保持在4，然后在上面的场景中上升到5

有人能解释一下上面的代码发生了什么，我的错误理解在哪里

---

多谢各位

与几乎所有其他D3示例相反，您所指的特定示例中使用的变量

i

是一个全局计数器，用于跟踪已看到的节点数。在许多其他情况下，您会看到这样的代码

.attr("something", function(d, i) { ... })

或

在所有这些情况下，

i

引用函数的局部变量——数组中数据元素的索引。这是通过D3传递的，并且是一个与您所指示例中的完全不同的

i

---

如果您将所有出现的

i

替换为

counter

使用i++获取所需内容，可能有助于更好地理解示例。不确定我是否理解您的问题

i

是一个全局变量，而不是数组索引，也许这就是你产生混淆的原因？是的，这是一个索引——在函数声明

函数（d，i）

中明确表示。如果这解决了你的问题，我可以发布一个带有更多解释的答案。谢谢，这就解释了我的问题。我认为我是一个特殊的d3变量，因为它在#selection.data（[values[，key]]）一段中说为了控制数据如何连接到元素，可以指定一个键函数。这将替换默认的索引行为；对新数据数组中的每个元素调用一次键函数，对选择中的每个现有元素调用一次键函数。在这两种情况下，键函数都传递给基准d和索引i。“这个i与全球i不同吗？谢谢。这是糟糕的编码风格，仅此而已，当我们习惯于在与局部索引变量类似的上下文中看到持久计数器变量时，使用

i

。正如@Larskothoff所说，所使用的

i

版本取决于函数声明——如果您声明一个具有特定名称的函数参数，那么它将屏蔽任何具有相同名称的外部变量。但是，我建议为计数器变量指定一个不同的名称，这样就不会产生混淆！

.data(data, function(d, i) { ... })