D3 Logarithmische Tick-Labels als 10er-Potenz

8

Mit D3 möchte ich eine X-Achse erstellen, die wie folgt aussieht:

Ich habe herausgefunden, wie die Achse und die Ticks funktionieren, aber nicht die Labels, die Folgendes verwenden:

%Vor%

Und hier ist ein jsFiddle mit dem vollständigen Code.

    
Mike Ward 27.09.2013, 16:09
quelle

2 Antworten

12

Sie könnten Unicode verwenden:

%Vor%

Zum Beispiel gibt formatTick(1e5) "10⁵" zurück. Beispiel bei bl.ocks.org/6738109 :

Der Nachteil dieses Ansatzes besteht darin, dass die vertikale Ausrichtung der hochgestellten Zahlen inkonsistent erscheint. Daher könnte es besser sein, die Nachauswahl zu verwenden (zB die Textelemente auszuwählen und jedem Element ein tspan-Element hinzuzufügen). Ein weiteres Beispiel auf bl.ocks.org/6738229 :

    
mbostock 28.09.2013, 03:44
quelle
2

Auf der Achse ist eine Funktion tickFormat verfügbar. Leider erwartet es einen String als Rückgabewert und plumpst diesen auf der Achse. Das wäre großartig, wenn Sie 10 ^ 6 anzeigen möchten, aber nicht so hilfreich, wenn Sie die hochgestellte Notation verwenden möchten.

Eine Umgehungslösung besteht darin, zwei Achsen zu erstellen: eine für die Anzeige der 10 und eine weitere für die Anzeige des Exponenten. Hier ist ein Beispiel :

%Vor%

Es ist nicht unbedingt die eleganteste Lösung, aber es funktioniert.

    
Towler 27.09.2013 16:37
quelle

Tags und Links