d3.js Kreisdiagramm mit gewinkelten / horizontalen Beschriftungen
Ich arbeite an einem Tortendiagramm. Ich muss versuchen, die Designs so anzupassen, dass das Etikett mit einer horizontalen Linie herausgezogen wird, die an die Slice-Ticks angehängt ist. Ist das möglich? Es wäre ein Bonus, wenn sich die schwarzen Punkte auf den Segmenten bilden würden.
Hier ist der Code für die Teilstriche. Wäre es möglich, einen anderen Satz von Linien zu erstellen, die sich kreuzen?
%Vor%3 Antworten
Zum Schluss habe ich den neuesten Code dafür in einem jquery-Plugin eingefügt. Es ist jetzt möglich, mehrere Kreisdiagramme mit diesen Bezeichnungen zu entwickeln.
AKTUELLER CODE - ** Ссылка - Entfernt das Label beim Beenden korrekt.
Hier ist ein Proof of Concept (mit einem anderen Beispiel als Ihnen als Grundlage, denn es gibt eine Menge Code in Ihrem). Dies ist der grundlegende Ansatz:
- Berechnen Sie für jedes Etikett den Anfang und das Ende der darunter liegenden Zeile. Dies geschieht, indem Sie das Etikett zeichnen und seine Begrenzungsbox erhalten.
- Dies gibt zwei Punkte auf dem Zeigerweg, der dritte ist der Mittelpunkt des jeweiligen Segments. Dies wird berechnet, während die Positionen der Etiketten berechnet werden.
- Diese drei Punkte werden Teil der Daten. Zeichnen Sie nun
paths für jedes der Datenelemente unter Verwendung der drei zuvor berechneten Punkte. - Fügen Sie einen SVG-Marker am Ende jedes Pfades für den Punkt hinzu.
Hier ist der Code, um es Schritt für Schritt zu tun.
%Vor%Dies berechnet die x- und y-Positionen der Labels außerhalb der Segmente. Wir berechnen auch die Position des Endpunkts des Zeigerpfads in der Mitte des Segments. Das heißt, sowohl in der Mitte zwischen Anfangs- und Endwinkel als auch zwischen Innen- und Außenradien. Dies wird zu den Daten hinzugefügt.
%Vor%Nach dem Hinzufügen des Textlabels (in diesem Fall einfach der Wert), erhalten wir für jedes die Bounding Box und berechnen die verbleibenden zwei Punkte für den Pfad, direkt unterhalb des Textes links und rechts unterhalb von
%Vor%Jetzt können wir die Pfade tatsächlich hinzufügen. Sie sind eine einfache Verbindung der drei zuvor berechneten Punkte, wobei am Ende ein Marker hinzugefügt wird. Beachten Sie, dass der Pfad, je nachdem, ob sich das Label links oder rechts vom Diagramm befindet, unten links oder rechts unten beginnen muss. Dies ist die if-Anweisung hier.
Komplette Demo hier .
Hier ist der Plugin-Code, der mehrere Instanzen des Tortendiagramms zulassen sollte - und dabei jedes Tortendiagramm mit einem neuen Datensatz aktualisieren kann.
Ich bin offen für Möglichkeiten, den Code zu verbessern. Ich finde es sieht immer noch etwas sperrig aus - vor allem die Art, wie ich den Selektor beim Update zurücksetze. Irgendwelche Vorschläge, um das zu rationalisieren?
%Vor%Tags und Links javascript d3.js