91

d3.call() がどのように機能するか、いつどこで使用するかを理解できません。ここに私が完成させようとしているチュートリアルのリンクがあります。

誰かがこの作品が何をしているのか具体的に説明してもらえますか

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom");

svg.append("g").call(xAxis);
4

2 に答える 2

124

ここでのコツは、xAxis が一連の SVG 要素を生成する関数であることを理解することだと思います。実際、それは によって返される関数d3.svg.axis()です。スケール関数と方向関数は、連鎖構文の一部にすぎません (詳細については、http: //alignedleft.com/tutorials/d3/chaining-methods/を参照してください)。

そのsvg.append("g")ため、SVG グループ要素を svg に追加し、それ自体への参照を選択の形式で返します (ここで動作しているのと同じチェーン構文)。セレクションで使用すると、セレクションの要素でcall名前が付けられた関数が呼び出されます。この場合、新しく作成され追加されたグループに対して軸関数 を実行しています。xAxisgxAxisg

それでも意味がない場合、上記の構文は次と同等です。

xAxis(svg.append("g"));

また：

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));
于 2012-10-09T20:34:52.453 に答える
15

受け入れられた答えが IMO を除外したの.call()は、それがD3 API 関数であり、 Function.prototype.call()と混同しないことです。

selection.call(function[, arguments…])

指定された関数を 1 回だけ呼び出し、オプションの引数とともにこの選択を渡します。この選択を返します。これは、関数を手動で呼び出すのと同じですが、メソッドの連鎖が容易になります。たとえば、再利用可能な関数でいくつかのスタイルを設定するには:

今言う：

d3.selectAll("div").call(name, "John", "Snow");

これは、次とほぼ同等です。

name(d3.selectAll("div"), "John", "Snow");

name は関数です。たとえば、

function name(selection, first, last) {
  selection
      .attr("first-name", first)
      .attr("last-name", last);
}

唯一の違いは、selection.callが呼び出された関数nameの戻り値ではなく、常に選択を返すことです。

于 2020-08-18T12:39:25.247 に答える