4

私は d3 を初めて使用し、Scott Murray による「Interactive Data Visualization for the Web」を使用しています (これはすばらしいことです)。これまでに見たものはすべて説明どおりに機能しますが、新しい要素を作成する手順を見ると、何かが混乱しました。簡単な例 (Scott Murray から):

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

この名前"circle"は、空の選択を返す に使用されselectAllます (私が学んだように、これは問題ありません)。次に、同じ名前を に入れることで円が追加され.appendます。すごい！

私が混乱したのは、同じことをもう一度やりたいときに何が起こるかということでした. 2 番目のデータセットがあり、同じ方法で新しい円を生成したいとします。データセットを置き換えるだけの同じコードを使用してもselectAll("circle")、空の選択が返されなくなるため、明らかに機能しません。だから私は遊んで、私はで任意の名前を使用できることを発見し、次のselectAllように空のままにすることさえできます:selectAll()

Scott Murray の例では、データセットごとに常に 1 つのタイプ (円、テキストなど) を使用します。最後に、公式の例で次のようなものを見つけました

svg.selectAll("line.left")
    .data(dataset)
    .enter()
    .append("line")
    .attr ...

svg.selectAll("line.right")
    .data(dataset)
    .enter()
    .append("line");
    .attr ...

ここで私の質問: このエントリはselectAll("ENTRY")実際にどのように使用されていますか? 後でそれらの要素を何らかの方法で再度参照するために利用できますか?それとも、実際には任意の方法で選択でき、空の選択を返す必要がある単なるダミーの名前ですか? 結果のDOMまたはオブジェクト構造のどこにもこのエントリが見つかりませんでした。

私を混乱させてくれてありがとう。

4

1 に答える 1

5

selectAll()呼び出しの前に呼び出しに何を入れたかは、.data()表示される内容を変更/更新する場合にのみ重要です。すでにいくつかの円があり、それらの位置を変更したいとします。座標はデータによって決定されるため、最初は次のようにします

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d; })
   .attr("cy", function(d) { return d; });

これで、新しいデータの要素数は同じですが、座標が異なります。円の位置を更新するには、

svg.selectAll("circle")
   .data(newData)
   .attr("cx", function(d) { return d; })
   .attr("cy", function(d) { return d; });

D3 は要素をnewData既存の円 ( で選択したものselectAll) に一致させます。この方法では、円を再度追加する必要はありません (結局、円は既に存在します)。座標を更新するだけです。

最初の呼び出しでは、技術的に s を選択する必要はなかったことに注意してくださいcircle。ただし、何をしようとしているのかを明確にし、誤って他の要素を選択してしまう問題を回避するために、そうするのは良い習慣です。

たとえば、この更新パターンの詳細については、こちらを参照してください。

于 2013-07-26T08:54:37.153 に答える