web-dev-qa-db-ja.com

D3 JavaScript foreachとそれぞれの違い

D3jsのforEachとeachの違いは何ですか？

javascriptd3.js
82
Kuan

まず、.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(...)で得られるもの）。技術的には、d3セレクションで.forEach()を呼び出すことができます。なぜなら、舞台裏では、d3セレクションは追加の関数を持つ配列です（そのうちの1つは.each()）。しかし、あなたはそれをするべきではありません：

  1. これを行うと、目的の動作が得られません。必要な動作を生成するためにd3選択で.forEach()を使用する方法を知るには、d3の内部の仕組みを詳しく理解する必要があります。 APIの文書化された公開部分だけを使用できるのであれば、なぜそうするのでしょうか。

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

主なポイントは、.each()を使用すると、d、this、およびiの3つの必要なものにアクセスできることです。 .forEach()を使用すると、配列（最初の例のように）で2つのもの（dとi）しか取得できず、また、HTML要素をこれらの2つのものに関連付ける作業の束。そして、それがとりわけd3の有用性です。

167
meetamit