javascript - D3 javascript foreach 和 each 的区别

Question

D3jsforEach和in 有什么区别？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(...)）。从技术上讲，您可以调用.forEach()d3 选择，因为在幕后，d3 选择是一个具有额外功能的数组（其中一个是.each()）。但你不应该这样做，因为：

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

2. 当您调用.each(function(d, i) { })d3 选择时，您获得的不仅仅是d和i：该函数被调用，使得该this函数内任何地方的关键字都指向与 . 关联的 HTML DOM 元素d。换句话说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 元素与这 2 个东西关联起来。这就是 d3 的用处。