221

誰かが D3.js の datum() と data() の違いを説明できますか? 両方が使用されているようですが、なぜ一方を選択する必要があるのか​​わかりません。

4

4 に答える 4

180

ここでマイク自身から正しい答えを見つけました：

D3 - JSON データ構造の扱い方

データを単一の SVG 要素にバインドする場合は、

(...).data([data])

また

(...).datum(data)

データを複数の SVG 要素にバインドする場合

(...).data(data).enter().append("svg")

.....

于 2012-12-05T19:33:08.817 に答える
42

ここにいくつかの良いリンクがあります：

後者について：

# selection.data([values[, key]])

指定されたデータの配列を現在の選択範囲と結合します。指定された値は、数値やオブジェクトの配列などのデータ値の配列、または値の配列を返す関数です。

...

# selection.datum([value])

選択した各要素のバインドされたデータを取得または設定します。selection.data メソッドとは異なり、このメソッドは結合を計算しません (したがって、開始選択と終了選択を計算しません)。

于 2012-12-05T17:07:59.003 に答える
6

HamsterHuey による説明は、これまでで最高だと思います。dataそれを拡張し、違いを視覚的に表現するために、との違いの少なくとも一部を示すサンプル ドキュメントを作成しましたdatum。

以下の回答は、これらの方法を使用して得られた意見ですが、間違っている場合は修正していただければ幸いです。

この例は、以下またはこの Fiddle で実行できます。

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)

datumジョインをしないので分かりやすいと思いますが、もちろんこれはユースケースが違うということでもあります。

私にとって大きな違いの 1 つは、他にもありdataますが、d3 チャートで (ライブ) 更新を行う自然な方法であるという事実です。

datum一方、静的表現にはより適しているように思えます。たとえば、次の例では、元の配列をループして、次のようにインデックスでデータにアクセスすると、同じ結果を得ることができます。

data.map((n, i) => {
 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node-${n} => data: ${d[i]}`);
});

ここで試してみてください: https://jsfiddle.net/gleezer/e4m6j2d8/6/

繰り返しになりますが、入力/更新/終了パターンから生じる精神的負担から解放されているため、これは把握しやすいと思いますが、選択を更新または変更する必要がある場合は、.data().

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)
/* Ignore all the css */
html {
  font-family: arial;
}

.l {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0;
}
.l-a {
  background: #cf58e4;
}
.l-b {
  background:  #42e4e4;
}

.a {
  border-bottom: 2px solid #cf58e4;
}

.b {
  border-bottom: 2px solid #42e4e4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>


<div style="margin-bottom: 20px;">
  <span class="l l-a"></span> .datum() <br />
  <span class="l l-b"></span> .data()
</div>

<div id="root"></div>

于 2018-08-21T10:18:19.123 に答える