1. ホーム
  2. javascript

[解決済み] Javascriptライブラリ d3呼び出し関数

2023-03-31 01:31:43

質問

d3.call()がどのように動作し、いつ、どこで使用するのか理解できません。 ここで は、私が完了しようとしているチュートリアルのリンクです。

どなたか、この部品が何をしているのか具体的に説明してください。

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

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

どのように解決するのですか?

ここでのコツは、xAxisがSVG要素の束を生成する関数であることを理解することだと思います。実際、この関数は d3.svg.axis() . scale と orient 関数は、連鎖構文の一部に過ぎません(詳しくは、こちらをご覧ください。 http://alignedleft.com/tutorials/d3/chaining-methods/ ).

そこで svg.append("g") は SVG グループ要素を svg に追加し、それ自身への参照を select という形で返します(ここでも同じチェーン構文が働いています)。このとき call という名前の関数を呼び出すことになります。 xAxis という名前の関数を、選択範囲の要素に対して g . この場合、軸関数を実行していることになります。 xAxis を、新しく作成され追加されたグループに対して実行しています。 g .

それでも意味がわからない場合は、上の構文が相当します。

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

または

d3.svg.axis()
      .scale(xScale)
      .orient("bottom")(svg.append("g"));