D3.js で「selectAll(null)」を使用する理由

null の選択: D3.js の selectAll(null) の背後にあるロジック

D3.js では、次のようなコードが発生する場合があります。 DOM 要素を追加するにはこれを使用します:

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

「circle」、「p」、「.foo」などの特定の要素を選択するのが一般的ですが、「null」を選択するのは不可解に思えるかもしれません。ただし、この手法では、「入力」選択が常にデータ配列に対応し、データ ポイントごとに 1 つの要素が存在することが保証されます。 >「入力」選択は、対応する DOM 要素を持たないデータ要素で構成されます。 D3.js では、データを既存の DOM 要素にバインドできます。ただし、DOM 要素よりも多くのデータ ポイントがある場合、超過したデータ ポイントは「入力」選択に属します。この選択範囲で「追加」関数を使用すると、新しい DOM 要素が作成され、データがバインドされます。

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

circles.enter()
.append("circle");

既存の要素にデータをバインドする

従来は、要素を選択していました。バインディングは次のようになります:

このアプローチでは、既存の円要素の「更新」選択が作成されますが、「入力」選択は、対応する要素のないデータ ポイントを処理します。

ただし、既存の要素があるかどうかに関係なく、selectAll(null) はデータ配列全体を表す選択を返します。これにより、DOM の状態に関係なく、「Enter」選択には常に完全なデータ セットが含まれるようになります。

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

例

この概念を説明するには、次のようにします。次の例を考えてみましょう。 がないにもかかわらず最初に、selectAll(null) は、「入力」選択にすべてのデータ ポイントが含まれていることを確認し、それに応じて段落が作成されます。要約すると、selectAll(null) は、「入力」選択を確実に実行するための一貫したメカニズムを提供します。 " 選択は常にデータ配列と一致するため、DOM の状態に関係なくデータ バインディングが簡単になります。

以上がD3.js で「selectAll(null)」を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。