Könnte jemand erklären, wie Daten in diesem 3D-Kreisdiagramm gehandhabt werden?
Ich versuche zu verstehen, wie die Funktionen in Donut3D.js - & gt; Ссылка behandelt die eingefügten Daten:
Vor allem, wo wird die startAngle der Daten auf 0 Grad gesetzt?
Ich möchte es auf 45º, dann auf 135º, 225º und 315º ändern (siehe Bild oben).
Ich habe diese Funktion gefunden:
%Vor%und versuchte einen Bogen einzufügen wie:
%Vor%aber es produziert nicht die gewünschten Effekte.
EDIT 1
Die erste Antwort half beim Drehen des inneren Kuchens, indem man:
änderte %Vor%bis
%Vor%Das Problem ist, dass jetzt der äußere Kuchen gebrochen wird - & gt; Zypern
Ich nehme an, die Lösung hat etwas mit der Funktionsfunktion pieOuter(d, rx, ry, h ) und den zwei startAngle und endAngle Variablen zu tun, aber sie funktionieren auf scheinbar unvorhersehbare Weise.
Danke
Ich weiß, dass Kreisdiagramme schlecht sind, besonders wenn sie in 3D sind; aber diese Arbeit ist ein Teil meiner Diplomarbeit, wo mein Job tatsächlich zeigt, wie PieCharts sind schlecht! Ich möchte dieses PieChart drehen, um zu zeigen, wie Wenn der 3D-Kuchen Slice oben positioniert ist, werden die Daten weniger angezeigt wichtig, oder wichtiger, wenn sie unten positioniert sind. Also ein 'Übel Journalist 'könnte die visuelle Wahrnehmung von Daten einfach ändern neigend und rotierend das PieChart!
2 Antworten
Hier ist eine korrigierte Funktion, die Rotation erlaubt.
Ändern Sie zuerst die Funktionssignatur, um die Variable rotate einzuschließen:
%Vor% Ändern Sie in der Funktion draw die Winkel. Anstatt mit pie winkels zu verschrauben, würde ich es direkt mit den Daten machen:
Dann müssen Sie die Funktion pieOuter korrigieren, um die Zeichenartefakte zu korrigieren:
Ändern des Standardstartwinkels
Donut3D Benutzer d3 die Kuchen Layout-Funktion hier , die eine Standard startAngle 0 .
Wenn Sie den Startwinkel ändern möchten, sollten Sie donut3d.js.
ändernAn erster Stelle sollten Sie sicher vermeiden, 3D-Kuchen / Doughnut-Diagramme zu verwenden, wenn Sie Wert auf Benutzerfreundlichkeit und Lesbarkeit Ihrer Visualisierungen legen - erklärt hier .
Layout der unteren Ecke korrigieren
Die endAngle , die Sie verwenden, ist nicht korrekt, wodurch die "hellblaue" Scheibe die "blaue" Scheibe überlappt. Sollte 405 (d. H. 45 + 360) anstelle von 415 sein.
Dann sollte die "pieOuter" -Winkelberechnung aktualisiert werden, damit sie sich korrekt verhält. Der Bogen, der nicht funktioniert, ist der mit endAngle > 2 * PI , und die Winkelberechnung sollte dafür aktualisiert werden.
Das macht den Trick (frag mich nicht warum):
%Vor%demo: Ссылка
Tags und Links javascript d3.js