javascript - D3 javascript foreach 和 each 的区别

Question

D3js中forEach和each有什么区别？

Answer 1

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

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

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

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

1. 这样做不会产生预期的行为。知道如何使用.forEach()使用 d3 选择以产生任何所需的行为需要深入了解 d3 的内部工作原理。那么为什么要这样做，如果您可以使用 API 的文档化公共(public)部分。

2. 当您调用 .each(function(d, i) { })在 d3 选择中，您得到的不仅仅是 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 的用途所在。