D3 Sankey-Diagramm mit Kreisknoten anstelle von Rechteckknoten
Ich möchte Sankey chart verwenden, aber mit Kreisen anstelle von Rechtecken.
Ich folge dem Beispiel von Mike Bostock .
Ich habe den Code dort geändert, um den Kreis zu verwenden, indem ich den Radius einstelle, aber wie man die Linien verbindet, die Knoten um den Kreis herum verbinden.
Irgendwelche Hinweise.
Danke.
1 Antwort
Zunächst möchte ich Ihnen sagen, dass ich Ihre Idee mochte.
Ich werde Sie durch einige einfache Schritte führen, um ein anständiges Sankey-Diagramm mit Kreisen zu erhalten. Das Endergebnis ist vielleicht nicht ideal für Ihre Anwendung, aber ich denke, es könnte für Sie als Ausgangspunkt nützlich sein. Sobald Sie die internen und externen Funktionen des d3 Sankey-Plugins kennen, sollten Sie in der Lage sein, genau das zu erstellen, was Sie entwerfen und wünschen.
Startpunkt
Dies ist nur ein einfaches Sankey-Beispiel. Ich habe Daten und Sankey-Plugin-Code in Jsfiddle enthalten. Dies ist nur für die Bequemlichkeit, da jsfidle keine geeignete Methode zum Einschließen mehrerer Dateien hat. Also, hier ist es:
Schritt 1
Jetzt machen wir das, was Sie bereits getan haben - konvertieren Sie Rechtecke in Kreise.
Ändern wir diesen Code:
%Vor%zu diesem Code:
%Vor%Ich habe Math.sqrt () gewählt, weil dieser Bereich des Kreises proportional zu dem Wert ist, den er repräsentiert. Ich denke, das ist die natürlichste Wahl für den Kreis.
Das Ergebnis ist hier:
Schritt 2
Links sind jetzt unnatürlich breit. Lassen Sie ihre Breite so ändern, dass sie proportional zur Quadratwurzel des von ihnen repräsentierten Flusses ist.
Ändern wir diesen Code:
%Vor%zu diesem Code:
%Vor%Das Ergebnis ist hier:
Schritt 3
Lasst uns nun Endpunkte von Links festlegen.
Ich werde Code von diesem verwenden Beantworte eine andere SO Frage .
Dieser Code:
%Vor%wird durch dieses ersetzt:
%Vor%Das Ergebnis ist hier:
Schritt 4
Links verlinken jetzt die Ursprünge der Knoten, aber wir brauchen sie, um die Zentren unserer Kreise zu verbinden
Deshalb ändern wir diesen Code:
%Vor%zu diesem Code:
%Vor%Das Ergebnis ist hier:
Schritt 5
Fast fertig. Was mich im letzten Diagramm noch stört, ist die Position der Knotenbeschriftungen. Wenn der Kreis größer ist, überlappt er mit seiner Bezeichnung. Das habe ich in dieser letzten Version behoben. Ergebnis ist:
Und hier ist jsfidle dieses letzten Schritts
Tags und Links javascript svg transformation d3.js sankey-diagram