D3.js で要素を追加するために `selectAll(null)` を使用するのはなぜですか?

null の選択: D3 で selectAll(null) を使用する理由

背景

D3 では、次のようなパターンがよく見られます:

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

このコードは要素を DOM に追加しますが、selectAll(null) になるのはなぜですか 使用済み？特定の要素については selectAll("circle") または selectAll("p") にするべきではないでしょうか?

選択範囲の入力

D3.js での "入力" 選択の説明:

データを要素にバインドする場合、次の 3 つのシナリオがあります:

1. 要素とデータの数が等しいポイント。
2. データ ポイントよりも多くの要素。
3. 要素よりも多くのデータ ポイント。

シナリオ #3 では、対応する要素のないデータ ポイントは「入力」に属します。 」の選択。 「入力」選択で追加を使用すると、一致しないデータの新しい要素が作成されます。

既存の要素へのバインド

提案されたスニペット var Circles = svg.selectAll("circle").data(data ) データを選択して既存の円にバインドします。後続の enter() 呼び出しは、要素が一致しないデータ ポイントを処理します。

selectAll(null) の使用

selectAll("circle") の使用はサークルが存在しない場合に機能しますが、selectAll(null) を使用すると、 「入力」選択が常にデータ配列内の要素に対応するという一貫した保証。このアプローチにより、一致しないすべてのデータ ポイントに新しい要素が確実に追加されます。

結論

以下の例は、selectAll(null) を使用して本文に段落を追加する方法を示しています。

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .text(d => "I am a " + d + " paragraph!")
  .style("color", String)

以上がD3.js で要素を追加するために `selectAll(null)` を使用するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。