[解決済み] D3 javascript foreachとeachの違いについて

疑問点

とはどのような違いがあるのでしょうか？ forEach と each をD3jsで使うか？

どのように解決するには？

まず .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 セレクションは特別な関数を持つ配列だからです（そのうちの1つが .each() ). しかし、あなたはそれを行うべきではありません、なぜなら。

1. そうすることで、望ましい動作が得られないからです。どのように .forEach() を使用する方法を知ることは、d3 の内部構造を深く理解することを必要とします。ドキュメント化された、APIの公開部分を使うことができるのであれば、なぜそれをするのでしょうか。

2. を呼び出すとき .each(function(d, i) { }) を呼び出すと、単に d と i のような関数が呼び出されます。 this に関連付けられた HTML DOM 要素を指すような関数が呼び出されます。 d . 言い換えれば console.log(this) の中から function(d,i) {} は次のようなログを記録します。 <div class="foo"></div> のようなものを記録します。これは便利です。 this オブジェクトのCSSプロパティ、コンテンツ、または何かを変更するために関数を呼び出すことができるからです。通常、これらのプロパティを設定するには、次のようにd3を使用します。 d3.select(this).style('color', '#c33'); .

主な収穫は .each() を使用すると、3つの必要なものにアクセスできるようになることです。 d , this と i . とは .forEach() で、(冒頭の例のような) 配列の場合、2つのものしか得られません ( d と i といった具合に）、HTML要素もこの2つに関連付けるには、たくさんの作業が必要になります。そしてそれが、とりわけd3の有用性なのです。