D3 JavaScript之间的区别每个

forEach和D3js中的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()在d3select上工作（当你使用d3.selectAll(...) ）。 从技术上讲，您可以在d3select上调用.forEach() ，因为在幕后，d3select是具有额外function的数组（其中一个是.each() ）。 但是你不应该那样做，因为：

1. 这样做不会产生所需的行为。 知道如何使用.forEach()和d3select以产生任何期望的行为，需要深入理解d3的内部运作。 那么为什么呢，如果你只能使用API​​的公开部分。

2. 当您在d3select中调用.each(function(d, i) { })时，您将获得的不仅仅是d和i ：该函数被调用，使得该函数内的this关键字指向与d 。 换句话说， function(d,i) {} console.log(this)会logging类似于<div class="foo"></div>或者任何html元素的东西。 这是有用的，因为那么你可以调用this对象的函数来改变它的CSS属性，内容或其他。 通常情况下，您可以使用d3来设置这些属性，如d3.select(this).style('color', '#c33'); 。

主要的一点是，使用.each()你可以访问你需要的三件事： d ， this和i 。 使用.forEach() ，在一个数组上（就像从头开始的例子），你只能得到2个东西（ d和i ），你还得做一堆工作来把HTML元素和这两件事联系起来。 除此之外，d3是如何有用的。