0

だから私はいくつかの助けが必要なd3のjavascriptコードを持っています。したがって、メインの html ファイルでは、このキャンバスを宣言しています。

次に、別のファイルに次のコマンドがあります。

  var canvas = d3.select("#canvas")

  var data_var=get_data();

  var selection=canvas.selectAll("circle")
                .data(data_var)

  selection.enter().append("circle")

私の問題は、 canvas.selectAll("circle") が呼び出されたときです。その「円」はどこから来ていますか? 指定されたキャンバスにも入力データにも「円」という名前のタイプがありません。

4

1 に答える 1

1

これが d3 の難しいところです。その API は、命令型プログラミング パラダイムではなく、宣言型を使用します。作成者のマイク・ボストックの言葉では、「何をするかではなく、何をしたいのかを d3 に伝える」ことを意味します。したがって、d3.selectAll("circle") を記述するときに行っていることは、d3 に「OK、準備ができました。ここにいくつかの svg 円を追加しようとしているので、それらを選択してください」と伝えることです。

実際には、それよりも少し複雑です。DOM にすでにいくつかの円がある場合は、data配列内にあるすべての円が選択され、 を呼び出したときに残りのデータ要素に対応する円が作成されますenter().append("circle")。ただし、DOM に円がない場合 (通常、新しいチャートを作成する場合)、d3はまだ存在しない円を選択します。.data().enter().append("circle") を呼び出した場合にのみ、d3 はこれらの円を DOM で選択します。

これまでに宣言型インターフェイスを使用したことがない場合 (私は d3 の前には使用していませんでした)、これはトリッキーな概念です。ここに私を助けたいくつかのリソースがあります：

http://bost.ocks.org/mike/join/

http://alignedleft.com/tutorials/d3/binding-data/ (「選択してください」セクションを参照)

于 2012-11-01T10:36:34.360 に答える