D3 javascript foreach和each之间的区别

Question

D3js中forEach和each之间的区别是什么？

Answer 1

首先，.forEach()不是d3的一部分，它是javascript数组的本机函数。所以，

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2

即使页面上没有加载d3，这也能正常工作。

接下来，d3的.each()适用于d3选择（当你d3.selectAll(...)时得到的）。从技术上讲，你可以在d3选择上调用.forEach()，因为在幕后，d3选择是一个带有额外功能的数组（其中一个是.each()）。但你不应该这样做，因为：

1. 这样做不会产生所需的行为。知道如何使用.forEach()进行d3选择以产生任何所需的行为，需要深入理解d3的内部工作原理。那么为什么要这样做，如果你可以使用API​​的公开部分。

2. 当您在d3选择上致电.each(function(d, i) { })时，您获得的不仅仅是d和i：系统会被调用，以便this关键字随处可见在该函数内部指向与d关联的HTML DOM元素。换句话说，来自console.log(this)内部的function(d,i) {}将记录类似<div class="foo"></div>或其他任何html元素的内容。这很有用，因为那样你就可以在这个this对象上调用函数来改变它的CSS属性，内容或其他东西。通常，您使用d3来设置这些属性，如d3.select(this).style('color', '#c33');中所示。

主要内容是，使用.each()您可以访问所需的3件事：d，this和i。使用.forEach()，在数组上（就像从头开始的示例中），您只能获得2件事（d和i），而且您必须完成一系列工作还将HTML元素与这两件事相关联。除此之外，还有d3是如何有用的。