web-dev-qa-db-ja.com

D3js：.datum（）および.data（）を使用する場合

面グラフを使用すると、.datumがよく表示されます。例えば：

svg = d3.select("#viz").append("svg").datum(data)

.datumが必要な場合の経験則はありますか？

var area = d3.svg.area()  
    .x(function(d) { return x(d.x); })  
    .y0(height)  
    .y1(function(d) { return y(d.y); });  

var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  

svg.append("path") 
    .datum(data)
    .attr("d", area);
d3.jsnvd3.js
30
Bobby Gifford

ドキュメントは、この質問に対する良い答えを与えると思います： https://github.com/mbostock/d3/wiki/Selections#wiki-datum 。

基本的に、ポイントは選択を行うときにいくつかのケースであなたが入力/終了セットに興味がないということです。これが完全なチャートの場合によくあると思われる場合は、データムを使用します。

Update：それは依存します：動的な更新を期待しないとき（これはあなたの与えられた例の場合のようです）、データムは大丈夫です。どうして？ path svg要素はまだないため、path要素は1つしかなく、追加しても変更されません。

複数のパス要素と動的な変更（たとえば、1秒ごとに最も古いデータ要素が削除され、新しいデータ要素が追加される）がある場合、あなたはデータを必要とします。これにより、3つのセットが得られます。データがもはや存在しないグラフィック要素のセット、データが更新される要素のセット、およびデータ項目が以前に存在しなかった要素のセット（それぞれ、入力、更新、出口セット）。これが必要になったら、d3ドキュメントを読むことをお勧めします。

明らかに、これらの3つのセットの計算にはコストがかかります。実際には、これが問題となるのは、「大きな」（d3が数万のアイテムにまで拡大すると思われる）データセットを使用している場合のみです。

34
Bertjan Broeksema

例付きの非常に良いチュートリアルはこちらです。 http://bost.ocks.org/mike/selection/#data

9
Vineesh Kalarickal

tutorial にリンクされている他の人もいますが、 selection.datumのAPIリファレンス は受け入れられた答えを与えると思います：

選択された各要素の連結データを取得または設定します。 selection.dataメソッドとは異なり、このメソッドは結合を計算しません（したがって、入力および終了選択を計算しません）。

結合を計算しないため、重要な機能を知る必要はありません。したがって、2つの署名の違いに注意してください。data関数のみがキー関数を受け入れます

  • selection.datum（[値]）
  • selection.data（[values [、key]]）

dataのチュートリアルでは、「データ」と「データ」という言葉の意味に類似した、さらに基本的な違いが得られると思います。つまり、前者は複数であり、後者は単数です。したがって、データは次の2つの方法で結合できます。

Selection.dataを介して要素のgroupsに結合されました。

Selection.datumを介してindividual要素に割り当てられます。

@Hugolpz ' Gist は、「グループ」対「個人」の重要性の素晴らしい例を示します。ここで、jsonはデータの配列を表します。 datumが配列全体を1つの要素にバインドする方法に注目してください。 dataで同じことを達成したい場合は、まずjsonを別の配列内に配置する必要があります。

  • var chart = d3.select（ "body"）。append（ "svg"）。data（[json]）
  • var chart = d3.select（ "body"）。append（ "svg"）。datum（json）
5
The Red Pea