D3 javascript foreach和each之间的区别

Question

是什么区别forEach,并each在D3js？

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()).但你不应该那样做,因为:

这样做不会产生所需的行为.知道如何使用.forEach()d3选择以产生任何期望的行为将需要深入理解d3的内部工作.那么为什么要这样做,如果你可以使用API的公开部分.
当你调用.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(),在一个数组(就像在开头的例子中)你只得到两件事(d和i),你必须做一些工作来将HTML元素与这两件事相关联.除此之外,还有d3是如何有用的.

感谢您写出了一个很好的答案,并且没有包含任何在SO上如此常见的不必要的嘲笑...... (14认同)
@sdupton,很酷 - 我不知道`.forEach`接受了第二个参考范围来确定这个.它让我意识到你可以使用类似的东西来实现与d3的`.each()`相同的效果,使用javascript的`.bind()`方法.例如,下面将`this`范围扩展到`window`并将console.log它:`selection.each(function(){console.log(this);} .bind(window))`. (2认同)