D3 - Verwenden von Zeichenfolgen für Achsenticks
Ich möchte ein Balkendiagramm mit Zeichenfolgen als Beschriftung für die Häkchen auf der x-Achse erstellen (z. B. Jahr 1, Jahr 2 usw. anstelle von 0,1,2 usw.).
Ich habe damit begonnen, die numerischen Werte für die x-Achse (z. B. 0,1,2,3 usw.) wie folgt zu verwenden:
1) Ich erstelle meine Bereiche:
x = d3.scale.ordinal()
.domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system
.rangeRoundBands([0,width], .1);
y = d3.scale.linear()
.domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)])
.range([height, 0])
.nice();
2) Machen Sie die Achsen:
d3.svg.axis()
.scale(x);
3) Zeichnen Sie die Achsen neu:
svg.select(".axis.x_axis")
.call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));
Dies funktioniert gut mit Standardbeschriftungen für numerische Achsen.
Wenn ich versuche, ein Array von Zeichenfolgen für die x tickValues wie folgt zu verwenden ...
d3.svg.axis()
.scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]
... wenn ich das Diagramm neu zeichne (mit oder ohne Änderungen an den Daten / Einstellungen), tauschen sich die Beschriftungen wie folgt aus.
Beachten Sie, wie Col 1 den Platz von Col 0 einnimmt und umgekehrt.
Wissen Sie, warum das passiert?