webentwicklung-frage-antwort-db.com.de

Wie kann ich mit nvd3 gedrehte Beschriftungen auf der x-Achse im Säulendiagramm positionieren?

Ich erstelle ein Balkendiagramm mit dem multiBarChart von nvd3 und muss die Position der gedrehten x-Achsen-Beschriftungen anpassen:

enter image description here

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

Ich möchte, dass die Spaltenbeschriftungen das Diagramm nicht überlappen und unter jedem Balken zentriert sind. Ich könnte die Beschriftungen nach dem Plotten des Diagramms auswählen und anpassen, aber gibt es einen einfacheren Weg?

javascriptchartsd3.jsvisualizationnvd3.js
25
David Tinker

Am besten finde ich es, wenn Sie die X-Achsentexte selbst drehen. Warum? Weil NVD3 die Rotation und die zugehörigen Übersetzungen nicht ordnungsgemäß verarbeitet. Schauen Sie sich Ihr Bild an, und Sie werden sehen, dass die Bibliothek die Rotation ermöglicht, um die Beschriftungen direkt unter den von ihnen repräsentierten Spalten zu verschieben. Es beginnt auch, die axis.tickPadding()-Werte falsch zu behandeln und so weiter.

Als Erstes müssen Sie sicherstellen, dass das Diagramm genügend Platz für die übersetzten Beschriftungen hat, z.

chart.margin({bottom: 60});

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

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 jetzt so aus:

Rotated / translated labels

34
River

Für mehrere Grafiken können Sie " '#' + containerId + 'svg " in die d3.select wie folgt hinzufügen:

//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)' });

Danke für die Antwort von @River.

5
Simon

Folgendes hat für mich gearbeitet:

chart.axislist["xAxis"]["rotateLabels"]= -45
1
Eric Jodet

Das hat für mich funktioniert. Der Hauptgrund, warum ich dies einreiche, ist, dass das Ändern des Ankers schöner ist, als die Position manuell zu übersetzen.

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;
});
1
Gordon Siegfriedt

Es gibt eine CSS-Alternative.

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}
0
Rodris

Was auch immer Sie für die Textdrehung verwenden, geben Sie Anfang/Mitte/Ende ein

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