1

私は手を汚してjavascriptコードを理解しようとしています。私のバックグラウンドは主にPythonとC++です。

だから私はここでこのコードを通り抜けていました

http://bl.ocks.org/mbostock/1021841

var force = d3.layout.force()
.nodes(nodes)
.links([])
.size([w, h])
.start();

私はそれを推測しています「。」メソッドを表します。しかし、どのオブジェクトに？そして私はこの複雑な関数（メソッド??）を理解するのに苦労しています

force.on("tick", function(e) {

  // Push different nodes in different directions for clustering.
  var k = 6 * e.alpha;
  nodes.forEach(function(o, i) {
    o.y += i & 1 ? k : -k;
    o.x += i & 2 ? k : -k;
  });

誰かがそれをもっと簡単な言葉で私に分解できますか？ありがとう

4

2 に答える 2

3

このコード：

var force = d3.layout.force()
.nodes(nodes)
.links([])
.size([w, h])
.start();

基本的に、C ++の場合と同じように読み取る必要があります（varキーワードを除きます。C++では、の特定の型を宣言する必要がありますforce）。C ++と同様に、空白は（ほとんど）重要ではありません。それぞれ.がプロパティアクセスを示します。（C ++とは異なり、JavaScriptオブジェクトはフィールドとメソッドを区別しません。すべてがプロパティです。関数プロパティの場合は、名前の後に括弧を付けて呼び出すことができます。必要に応じて、括弧内に関数の引数を指定します。）ここにあります：

  • d3.layoutlayout-のプロパティにアクセスしますd3。
  • .force()force-のプロパティである関数を呼び出しますd3.layout。内部forceでd3.layoutは、キーワードとして使用できますthis。
  • .nodes(nodes)-の呼び出しnodesによって返されたオブジェクトのプロパティである関数を呼び出しますforce()（おそらくd3.layout、おそらく何か他のもの）。
  • 等

force最後に、によって返される値に割り当てますstart()。

2番目のコードについて：

force.on("tick", function(e) {

  // Push different nodes in different directions for clustering.
  var k = 6 * e.alpha;
  nodes.forEach(function(o, i) {
    o.y += i & 1 ? k : -k;
    o.x += i & 2 ? k : -k;
  });

ここに、の例（実際には2つ）がありanonymous functionます。通常のJavaScriptの規則に基づいて、のon関数forceはおそらくイベントハンドラー（この場合はイベント）を登録するために使用され"tick"ます。イベントハンドラは無名関数です。

function(e) {
  // Push different nodes in different directions for clustering.
  var k = 6 * e.alpha;
  nodes.forEach(function(o, i) {
    o.y += i & 1 ? k : -k;
    o.x += i & 2 ? k : -k;
}

説明のために、この関数を「外部」と呼びましょう。これは、tickイベントのプロパティを含むオブジェクトであると私が推測する引数を取ります。アウターの本体には、別の無名関数があります。それは。への引数nodes.forEachです。この2番目の無名関数を「内部」と呼びましょう。ここでの関数は、ほとんどの場合、すべてのJavaScript配列のプロパティであるforEach標準のイテレーター関数です。forEach関数を引数として受け取り、配列のすべての要素で関数を順番に呼び出し、配列要素と要素インデックスを渡します。内部は実際にはクロージャの例です。関数本体kは外部のローカル変数として定義されている変数を参照します。

JavaScriptは、いくつかの点でC ++と同じであり、いくつかの点で根本的に異なります。類似点がどこで終わり、相違点がどこから始まるかを知らない限り、C ++のバックグラウンドは、コーディング（およびコード読み取り）の取り組みを真剣に迷わせる可能性があります。紹介論文「JavaScriptの再紹介」を強くお勧めします。言語のすべての主要な機能をカバーしており、C++とJavaScriptがどのように類似しているかとどのように異なっているかを明確にするのに役立つはずです。

于 2013-02-21T08:24:07.157 に答える
1

これ：

var force = d3.layout.force()
.nodes(nodes)
.links([])
.size([w, h])
.start();

これと同じです：

var force = d3.layout.force().nodes(nodes).links([]).size([w, h]).start();

変数の値はforce、チェーンの最後のメソッド（この場合.start()）からの戻り値になります。

これはメソッドチェーンと呼ばれます。連続する各関数は、その前の関数の戻り値のメソッドとして呼び出されます。

したがって、メソッド.nodes(nodes)はから返されたオブジェクトで呼び出されd3.layout.force()、メソッド.links([])はから返されたオブジェクトで呼び出されます.nodes(nodes)。

于 2013-02-21T07:31:30.377 に答える