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); 
30
Bobby Gifford

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

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

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

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

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

34

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

9

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