6

私はd3視覚化ライブラリについてさらに学び、次のようなスニペットを持つ棒グラフの例をいくつか見てきました。

chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());

私の混乱は最初のselectAll行にあります。入力されたデータに新しいrectを追加するので、存在する前にすべてのrectを選択する目的は何ですか？これらの要素が存在しない場合、selectAllに何が含まれるかは重要ですか？

4

2 に答える 2

4

これは、D3言語の宣言型の性質の一部です。ThinkingwithJoinsの記事で詳細に説明されています。抜粋：

しかし、selectAll（ "circle"）とは何ですか？新しい要素を作成するために、存在しない要素を選択する必要があるのはなぜですか？ワット。

これが取引です。D3に何かを行う方法を指示する代わりに、D3に必要なことを指示します。この場合、円の要素をデータに対応させる必要があります。データごとに1つの円が必要です。次に、D3に円を作成するように指示する代わりに、選択した「円」がデータに対応する必要があることをD3に伝え、そこに到達する方法を説明します。この概念は、データ結合と呼ばれます。

このベン図は、データ結合を示しています。既存の要素にバインドされたデータは、更新（内部）選択を生成します。バインドされていないデータは入力選択を生成し（左）、バインドされていない要素は終了選択を生成します（右）。データ入力更新要素終了結合を使用して考えると、シーケンスの背後にある謎が明らかになります。

selectAll（ "circle"）は、SVGコンテナ要素（svg）が空であるため、空の選択を返します。ここには魔法はありません。

空の選択はデータに結合されます：data（data）。dataメソッドは、データを要素にバインドし、入力、更新、終了の3つの仮想選択を生成します。入力選択には、欠落している要素のプレースホルダーが含まれています。更新の選択には、データにバインドされた既存の要素が含まれます。残りの要素はすべて、削除のために出口選択に含まれます。

選択範囲が空だったため、すべてのデータはenter（）のプレースホルダーノードになります。

これは最初の例と同じ追加ですが、複数のプレースホルダーに適用されます。選択メソッドは、選択された要素を暗黙的に繰り返し処理します。欠落している要素は、append（ "circle"）によってSVGコンテナに追加されます。

以上です。選択した「円」をデータに対応させたいと考え、不足している要素を作成する方法を説明しました。

于 2012-12-29T00:56:03.347 に答える
1

  1. あなたの例selectAll("rect")では、最初に呼び出されます。ただし、空の選択を返します。

  2. data(data)空の選択をデータにバインドします。新しい空の選択を作成します。

  3. .enter()結合された配列が選択範囲よりも長い場合に追加する必要のあるDOM要素を識別します。

  4. append("rect")空ではなくなった各空の選択範囲に長方形を追加します

このセクションでは、D3.jsデータバインディング、どのように機能するかについて詳しく説明されています。

于 2020-01-28T14:00:54.153 に答える