Datenvisualisierung mit Python und JavaScript, 2.

Anhang A. D3's Eingabe/Ausgabe-Muster

Wie in "Aktualisieren des DOM mit Daten" gezeigt , hat D3 jetzt eine benutzerfreundlichere join Methode, die die alte Implementierung der Datenverknüpfung mit Mustern, die auf den Methoden enter, exit und remove basieren, ersetzt. Die Methode join ist eine großartige Ergänzung für D3, aber es gibt tausende von Beispielen im Internet, die die alten Datenverknüpfungsmuster verwenden. Um diese zu verwenden/umzuwandeln, ist es hilfreich, ein wenig mehr darüber zu wissen, was unter der Haube von D3 passiert, wenn Daten verknüpft werden.

Um die Datenverknüpfung in D3 zu demonstrieren, wollen wir einen Blick unter die Haube werfen, wenn D3 Daten verknüpft. Beginnen wir mit unserem Balkendiagramm ohne Balken, mit SVG-Canvas und Diagrammgruppe an Ort und Stelle:

...
    <div id="nobel-bar">
      <svg width="600" height="400">
        <g class="chart" transform="translate(40, 20)"></g>
      </svg>
    </div>
...

Um Daten mit D3 zu verknüpfen, brauchen wir zunächst einige Daten in der richtigen Form. In der Regel handelt es sich dabei um ein Array von Objekten, wie das nobelData unseres Balkendiagramms:

var nobelData = [
    {key:'United States', value:336},
    {key:'United Kingdom', value:98},
    {key:'Germany', value:79},
    ...
]

Ein D3-Daten-Join wird in zwei Schritten durchgeführt. Zuerst fügen wir die zu verknüpfenden Daten mit der Methode data hinzu und führen dann die Verknüpfung mit der Methode join durch.

Um unsere Nobel-Daten zu einer Gruppe von Balken hinzuzufügen, gehen wir wie ...