D3.js - Laden und Bearbeiten externer Daten
Ich bin neu bei D3.js und spiele mit einer Vielzahl von Tutorials / Übungen / etc herum, aber mein Grundbedürfnis für D3 besteht darin, externe Daten (normalerweise JSON) zu laden und einige interaktive Diagramme basierend auf diesen Daten zu zeichnen.
Das grundlegende Sunburst-Beispiel ist hier :
Ich habe es erfolgreich an meine eigenen Daten angepasst. Ich hatte jedoch gehofft, die Lieferung von Daten zu vereinfachen und einen Teil der Manipulation innerhalb von D3.js zu übernehmen. Zum Beispiel möchte ich anstelle eines hierarchischen Arrays, das für ein Sunburst-Diagramm bereit ist, eine flache Datendatei liefern, die nach Bedarf von D3 manipuliert werden kann.
Aber ich bin mir nicht sicher, wie ich ein Sunburst-Diagramm außerhalb einer der Datenfunktionen von D3 zeichnen soll. Ich habe den folgenden Code ausprobiert, und anstatt die Daten über JSON zu laden, wurde sie inline eingefügt, so dass die Struktur sichtbar ist (nicht überraschend, dass es nicht funktionierte):
%Vor%So sieht das HTML aus:
%Vor%Ich bin mir sicher, dass ich etwas falsch mache, das ist ziemlich einfach, aber ich habe Probleme damit, herauszufinden, wie D3 alle Daten durchgehen und das Diagramm abbilden wird, wenn ich die Zeichenfunktionen nicht verschachtelt habe innerhalb einer Funktion wie d3.json.
Irgendwelche Gedanken?
1 Antwort
Es sieht so aus, als hätten Sie vergessen, partition.nodes(nest) aufzurufen, um die Daten mit den entsprechenden Layout-Positionen zum Rendern der Pfade zu füllen.
Im Sunburst-Beispiel , zu dem Sie eine Verknüpfung hergestellt haben, sind die JSON-Daten folgendermaßen gebunden:
%Vor%Dies entspricht:
%Vor% Beide Ansätze funktionieren, aber Sie müssen partition.nodes irgendwo aufrufen, sonst haben die Daten keine Positionen.
Beachten Sie auch, dass Ihre Beispieldaten mit der angegebenen Verschachtelung eine Hierarchie mit einem einzelnen Knoten erzeugen würden, da alle angegebenen verschachtelten Felder identisch sind.
Tags und Links javascript json hierarchy d3.js sunburst-diagram