d3.data() verstehen

d3.data() verstehen

Was genau passiert durch den Aufruf d3.data(xyz)

  • die Daten xyz werden an die einzelnen DOM-Elemente der Selection gebunden

Wie genau werden die Daten an die DOM-Elemente gebunden?

  • xyz muss ein Array sein.
  • es kann ein Array von beliebigem Datentyp sein, Objekte, Primitive oder selber ein Aray
  • die Anzahl der Elemente des Arrays bestimmt die Anzahl der DOM-Elemente, die durch d3.js eingefügt werden

Beispiel 1 – data is Array aus 3 Elementen

var myData = [1,2,3];

ergibt als Eintrag in der __data__ Eigenschaft für 3 Elemente jeweils:

 

See the Pen Learning d3.js V4 – d3.js.data() -1 by Inselhopper (@Inselhopper) on CodePen.0

Beispiel 2 – data ist Matrix

See the Pen Learning d3.js V4 – d3.js.data() -2 by Inselhopper (@Inselhopper) on CodePen.0

Wie kann man die anonyme Funktion verstehen function(d) {return d}?

  • d3.js sorgt dafür, dass innerhalb der selectionAll -„Schleife“ an der Stelle des Funktionsaufrufes die __data_- Attribut des jeweiligen DOM-Objektes ausgegeben wird

Wie  mit verschachtelten DOM-Strukturen und d3.data() umgehen?

  • wird ein DOM-Element an ein aderes gehängt (egal ob mit selection() oder mit enter()  oder nur mit append(), dann erbt dieses Element das __data__ -Attribut seines Eltern-Elementes

See the Pen Learning d3.js V4 – d3.js.data() -3 by Inselhopper (@Inselhopper) on CodePen.0