javascript - D3javascriptforeachとeachの違い

Question

D3jsforEachとの違いは何ですか？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()はd3の選択（あなたがあなたが得たものd3.selectAll(...)）で動作します。技術的には、d3選択を呼び出すことができます。.forEach()これは、舞台裏では、d3選択は追加の関数を含む配列であるためです（そのうちの1つはです.each()）。しかし、次の理由でそれを行うべきではありません。

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

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

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