D3 javascript foreach 和 each 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13465796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 javascript Difference between foreach and each
提问by Kuan
What is the difference between forEachand eachin D3js?
是什么区别forEach，并each在D3js？
回答by meetamit
First, .forEach()is not part of d3, it's a native function of javascript arrays. So,
首先，.forEach()它不是 d3 的一部分，它是 javascript 数组的本机函数。所以，
["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2
And that works even if d3 is not loaded on the page.
即使 d3 没有加载到页面上，它也能工作。
Next, d3's .each()works on d3 selections (what you get when you d3.selectAll(...)). Technically, you can call .forEach()on a d3 selection, since behind the scenes, a d3 selection is an array with extra functions (one of them is .each()). But you shouldn't do that because:
接下来，d3.each()处理 d3 选择（你得到什么d3.selectAll(...)）。从技术上讲，您可以调用.forEach()d3 选择，因为在幕后，d3 选择是具有额外功能的数组（其中之一是.each()）。但你不应该这样做，因为：
Doing so will not produce the desired behavior. Knowing how to use
.forEach()with a d3 selection in order to produce any desired behavior would require intimate understanding of the inner workings of d3. So why do it, if you can just use the documented, public part of the API.When you call
.each(function(d, i) { })on a d3 selection, you get more than justdandi: the function gets invoked such that thethiskeyword anywhere inside that function points to the HTML DOM element associated withd. In other wordsconsole.log(this)from insidefunction(d,i) {}will log something like<div class="foo"></div>or whatever html element it is. And that's useful, because then you can call function on thisthisobject in order change its CSS properties, contents or whatever. Usually, you use d3 to set these properties, as ind3.select(this).style('color', '#c33');.
这样做不会产生所需的行为。知道如何使用
.forEach()d3 选择以产生任何所需的行为需要对 d3 的内部工作原理有深入的了解。那么为什么要这样做，如果您可以使用 API 的文档化公共部分。当您调用
.each(function(d, i) { })d3 选择时，您得到的不仅仅是dandi：函数被调用，使得该this函数内任何位置的关键字都指向与 关联的 HTML DOM 元素d。换句话说，console.log(this)从内部function(d,i) {}将记录类似<div class="foo"></div>或任何 html 元素的内容。这很有用，因为这样你就可以在这个this对象上调用函数来改变它的 CSS 属性、内容或其他任何东西。通常，您使用 d3 来设置这些属性，如d3.select(this).style('color', '#c33');.
The main takeaway is that, using .each()you get access to 3 things you need: d, thisand i. With .forEach(), on an array (like in the example from the beginning) you only get 2 things (dand i), and you'd have to do a bunch of work to also associate an HTML element with those 2 things. And that, among other things, is how d3 is useful.
主要的.each()收获是，使用您可以访问您需要的 3 个东西：d,this和i. 使用.forEach(), 在数组上（如开头的示例中），您只会得到 2 个东西（d和i），并且您必须做大量工作才能将 HTML 元素与这 2 个东西相关联。这就是 d3 的用处。
