Wie kann ich gedrehte X-Achsenbeschriftungen im Säulendiagramm mit nvd3 positionieren?

Ich baue ein Balkendiagramm nvd3 der multiBarChart verwenden und müssen die Position gedreht x-Achsenbeschriftungen anzupassen:Wie kann ich gedrehte X-Achsenbeschriftungen im Säulendiagramm mit nvd3 positionieren?

enter image description here

var chart = nv.models.multiBarChart(); 
... 
chart.rotateLabels(-90);

ich die Spaltenbeschriftungen möchte nicht das Diagramm zu überlappen und zentriert werden unter jeder Bar. Ich könnte die Beschriftungen nach dem Plotten des Diagramms auswählen und anpassen, aber gibt es einen einfacheren Weg?

Quelle

2012-10-30 David Tinker

Der beste Weg, den ich gefunden habe, um dies zu handhaben, ist die Rotation der X-Achse Tick-Etiketten selbst durchzuführen. Warum? Weil NVD3 die Rotation und die damit verbundenen Übersetzungen nicht korrekt behandelt. Sehen Sie sich Ihr Bild an und Sie werden sehen, dass die Bibliothek die Rotation ermöglicht, die Beschriftungen direkt unter den Spalten, die sie darstellen, zu übersetzen. Es fängt auch an, die axis.tickPadding() Werte falsch zu behandeln, und so weiter.

Das erste, was Sie tun müssen, ist, um sicherzustellen, dass das Diagramm genügend Platz für die übersetzten Etiketten hat, etwa so:

chart.margin({bottom: 60});

Wir können dann übersetzen und drehen Sie die Etiketten:

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

Die Etiketten sehen nun wie folgt aus:

Rotated/translated labels

Quelle

2012-11-20 11:38:33 River

Dank dafür. Wo soll man das machen? Ich habe mehrere Diagramme, und wenn ich Sie wie gesagt mache, funktioniert es nur für das erste Diagramm. Vielleicht gibt es ein Race Condition und ich muss nur die Etiketten drehen, wenn ich sicher bin, dass die Charts gezeichnet sind. Irgendeine Idee, wie man das weiß? – huyz

Sie müssten entweder einen Weg finden, alle xTicks gleichzeitig auszuwählen (indem Sie den Auswahlschalter '.nv-x.nv-Achse> g' auf etwas Sinnvolles ändern), aber das könnte schwierig sein. Sie müssen dies wahrscheinlich für jeden tun, indem Sie ihre xTicks der Reihe nach auswählen. Stellen Sie sicher, dass Sie jedem Diagramm eine eigene Klasse/ID geben, damit Sie sie leicht auswählen können. – River

Danke, dass dies für mich funktioniert –

//Rotate x-axis label 
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

Sowieso Dank für @River Antwort:Für mehrere Grafik können Sie Ihre "'#' + containerId + 'svg" in der d3.select wie unten hinzufügen.

Quelle

2013-12-05 06:59:47 Simon

Nur eine Anmerkung zu sagen, dass Sie dies für alle anderen Diagrammtypen tun können (und sollten). Es empfiehlt sich, den spezifischen D3-Container anzugeben, an dem Sie gerade arbeiten, insbesondere wenn mehrere Diagramme beteiligt sind. –

Das funktionierte für mich. Der Hauptgrund, den ich einreiche, ist, dass das Ändern des Ankers schöner ist als das manuelle Übersetzen der Position.

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text'); 
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ; 
xTicks.attr('text-anchor',function() { 
    var anchor; 
    if(angle > 0){ anchor = 'start'; } 
    else if(angle < 0){ anchor = 'end'; } 
    else { anchor = 'middle'; } 
    return anchor; 
});

Quelle

2014-06-04 18:03:55

Geringfügige vorgeschlagene Änderung '' 'xTicks.style ({'text-anchor': (function() {var anchor; ....})()});' '' – user25064

Was auch immer Sie Text Rotation Start/Mitte geben/Ende

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end

Quelle

2014-12-11 05:23:10 Rayiez

Das funktioniert für mich folgende:

chart.axislist["xAxis"]["rotateLabels"]= -45

Quelle

2016-05-26 09:04:15

Wie kann ich gedrehte X-Achsenbeschriftungen im Säulendiagramm mit nvd3 positionieren?

Antwort

Verwandte Themen