javascript - valores - etiquetas personalizadas graficos excel

¿Cómo puedo colocar las etiquetas giradas del eje x en el gráfico de columnas usando nvd3?

Question

Estoy construyendo un gráfico de barras usando el multiBarChart de nvd3 y necesito ajustar la posición de las etiquetas giradas del eje x:

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

Me gustaría que las etiquetas de las columnas no se superpongan al gráfico y se centren debajo de cada barra. Pude seleccionar las etiquetas después de trazar el gráfico y ajustarlas, pero ¿hay alguna manera más fácil?

Answer 1

Cualquiera que sea la rotación de texto es dar inicio / medio / final

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

Answer 2

Esto funcionó para mí. La razón principal por la que presento esto es que cambiar el delimitador es mejor que traducir la posición manualmente.

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

Answer 3

Hay una alternativa CSS.

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

Answer 4

La mejor manera que he encontrado para manejar esto es realizar la rotación de las etiquetas de tic de eje x por ti mismo. ¿Por qué? Porque NVD3 no está manejando la rotación y las traducciones asociadas correctamente. Mire su imagen, y verá que la biblioteca permite que la rotación traduzca las etiquetas directamente debajo de las columnas que representan. También comienza a manipular incorrectamente los valores de axis.tickPadding() , y así sucesivamente.

Lo primero que debe hacer es asegurarse de que el gráfico tenga suficiente espacio para las etiquetas traducidas, de esta manera:

chart.margin({bottom: 60});

Luego podemos traducir y rotar las etiquetas:

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

Las etiquetas ahora se ven así:

Answer 5

Lo siguiente funcionó para mí:

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

Answer 6

Para gráficos múltiples, puede agregar " ''#'' + containerId + ''svg '' en el d3.select como a continuación:

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

De todos modos, gracias por la respuesta de @River.