it-swarm.com.de

Was ist der Unterschied zwischen D3-Datum und Daten?

Kann jemand bitte den Unterschied zwischen datum () und data () in D3.js erklären? Ich sehe beide verwendet werden und ich bin nicht sicher, warum Sie eine über die andere wählen sollten?

184
josephmisiti

Ich habe hier die richtige Antwort von Mike selbst gefunden:

D3 - Wie gehe ich mit JSON-Datenstrukturen um?

Wenn Sie Ihre Daten an ein einzelnes SVG-Element binden möchten, verwenden Sie

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

oder

(...).datum(data)

Wenn Sie Ihre Daten an mehrere SVG-Elemente binden möchten

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

.....

155
josephmisiti

Hier sind einige gute Links:

Nach letzterem:

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

Verbindet das angegebene Datenarray mit der aktuellen Auswahl. Die angegebenen Werte sind ein Array von Datenwerten, z. B. ein Array von Zahlen oder Objekten, oder eine Funktion, die ein Array von Werten zurückgibt.

...

# selection.datum([value])

Ruft die gebundenen Daten für jedes ausgewählte Element ab oder legt diese fest. Im Gegensatz zur selection.data-Methode berechnet diese Methode keine Verknüpfung (und berechnet daher keine Eingabe- und Ausgabeauswahl).

37
paulsm4

Nachdem ich dies ein wenig untersucht habe, habe ich festgestellt, dass die Antworten hier auf SO) nicht vollständig sind, da sie nur den Fall abdecken, wenn Sie selection.data und selection.datum aufrufen. mit einem Eingabeparameter data. Auch in diesem Szenario verhalten sich die beiden unterschiedlich, wenn die Auswahl ein einzelnes Element ist und mehrere Elemente enthält. Darüber hinaus können beide Methoden auch ohne Eingabeargumente in aufgerufen werden Um die gebundenen Daten/Daten in der Auswahl abzufragen, verhalten sie sich in diesem Fall wieder anders und geben unterschiedliche Dinge zurück.

Bearbeiten - Ich habe eine etwas ausführlichere Antwort auf diese Frage gepostet hier , aber der folgende Beitrag fasst alle wichtigen Punkte in Bezug auf die beiden Methoden und deren Unterschiede zusammen.

Bei Angabe von data als Eingabeargument

  • selection.data(data) versucht, eine Datenverknüpfung zwischen den Elementen des Arrays data mit der Auswahl durchzuführen, wodurch enter()-, exit()- und update()-Auswahlen erstellt werden, die Sie anschließend bearbeiten können. Das Endergebnis davon ist, dass, wenn Sie ein Array data = [1,2,3] übergeben, versucht wird, jedes einzelne Datenelement (d. H. Datum) mit der Auswahl zu verbinden. An jedes Element der Auswahl ist nur ein einziges Bezugselement von data gebunden.

  • selection.datum(data) umgeht den Daten-Join-Prozess insgesamt. Dies ordnet einfach die Gesamtheit von data allen Elementen in der Auswahl als Ganzes zu, ohne sie wie im Fall von Datenverknüpfungen aufzuteilen. Wenn Sie also ein gesamtes Array data = [1, 2, 3] an jedes DOM-Element in Ihrem selection binden möchten, wird dies durch selection.datum(data) erreicht.

Warnung: Viele Leute glauben, dass selection.datum(data) zu selection.data([data]) äquivalent ist, aber dies ist nur wahr, wenn selection enthält ein einzelnes Element . Wenn selection mehrere DOM-Elemente enthält, bindet selection.datum(data) die Gesamtheit von data an jedes einzelne Element in der Auswahl. Im Gegensatz dazu bindet selection.data([data]) nur die Gesamtheit von data an das erste Element in selection. Dies stimmt mit dem Datenverknüpfungsverhalten von selection.data überein.

Wenn kein data -Eingabeargument angegeben wird

  • selection.data() nimmt das gebundene Datum für jedes Element in der Auswahl und kombiniert sie zu einem Array, das zurückgegeben wird. Wenn also Ihr selection 3 DOM-Elemente mit den Daten "a", "b" und "c" enthält, die jeweils gebunden sind, gibt selection.data()["a", "b", "c"] zurück. Es ist wichtig zu beachten, dass, wenn selection ein einzelnes Element ist, an das (als Beispiel) das Datum "a" gebunden ist, selection.data()["a"] und nicht "a" zurückgibt ] _ wie manche vielleicht erwarten.

  • selection.datum() ist nur für eine einzelne Auswahl sinnvoll, da es als Rückgabe des Datums definiert ist, das an das erste Element der Auswahl gebunden ist. In dem obigen Beispiel, in dem die Auswahl aus DOM-Elementen mit dem gebundenen Datum "a", "b" und "c" besteht, würde selection.datum() einfach "a" zurückgeben.

Beachten Sie, dass auch wenn selection ein einzelnes Element hat, selection.datum() und selection.data() unterschiedliche Werte zurückgeben. Ersteres gibt das gebundene Datum für die Auswahl zurück ("a" im obigen Beispiel), während Letzteres das gebundene Datum innerhalb eines Arrays zurückgibt (["a"] im obigen Beispiel).

Hoffentlich hilft dies dabei zu klären, wie sich selection.data und selection.datum() unterscheiden, wenn Daten als Eingabeargument bereitgestellt werden und wenn nach dem gebundenen Datum abgefragt wird, indem keine Eingabeargumente angegeben werden.

PS - Der beste Weg, um zu verstehen, wie dies funktioniert, besteht darin, mit einem leeren HTML-Dokument in Chrome) zu beginnen, die Konsole zu öffnen und zu versuchen, dem Dokument einige Elemente hinzuzufügen, und dann mit Daten zu binden selection.data und selection.datum Manchmal ist es viel einfacher, etwas zu "grocken" als durch Lesen.

35
HamsterHuey

Ich denke, die Erklärung von HamsterHuey ist die bisher beste. Um es zu erweitern und eine visuelle Darstellung der Unterschiede zu geben, habe ich ein Beispieldokument erstellt, das zumindest einen Teil der Unterschiede zwischen data und datum veranschaulicht.

Die folgende Antwort ist eher eine Meinung, die sich aus der Verwendung dieser Methoden ergibt, aber ich freue mich, wenn ich mich irre.

Dieses Beispiel kann unten oder in dieser Geige ausgeführt werden.

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}`)

Ich denke, dass datum einfacher zu verstehen ist, da es keinen Join ausführt, aber dies bedeutet natürlich auch, dass es unterschiedliche Anwendungsfälle gibt.

Für mich ist ein großer Unterschied - obwohl es mehr gibt - die Tatsache, dass data nur die natürliche Art ist, (Live-) Aktualisierungen auf einem d3-Chart vorzunehmen, da das gesamte Eingabe-/Aktualisierungs-/Beendigungsmuster es einfach macht, Sobald Sie es bekommen.

datum scheint mir dagegen eher für statische Darstellungen geeignet zu sein. Im folgenden Beispiel könnte ich zum Beispiel das gleiche Ergebnis erzielen, wenn ich das ursprüngliche Array durchschleife und über den Index auf die Daten zugreife:

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

Probieren Sie es hier aus: https://jsfiddle.net/gleezer/e4m6j2d8/6/

Wiederum denke ich, dass dies viel einfacher zu verstehen ist, wenn Sie sich von der mentalen Belastung durch das Eingabe-/Aktualisierungs-/Beendigungsmuster frei halten, aber sobald Sie die Auswahl aktualisieren oder ändern müssen, sollten Sie sicher besser auf die Funktion .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>
2
Nobita