etiquetado de eje d3

Question

¿Cómo agrego etiquetas de texto a los ejes en d3?

Por ejemplo, tengo un gráfico de líneas simple con un eje xey.

En mi eje x, tengo marcas del 1 al 10. Quiero que la palabra "días" aparezca debajo para que la gente sepa que el eje x está contando días.

De forma similar, en el eje y, tengo los números del 1 al 10 como ticks, y quiero que las palabras "sándwiches comidos" aparezcan de lado.

¿Hay una manera simple de hacer esto?

Answer 1

Las etiquetas de ejes no están incorporadas en D3's axis component, pero puede agregar etiquetas usted mismo simplemente agregando un elemento SVG text. Un buen ejemplo de esto es mi recreación del gráfico de burbujas animadas de Gapminder, The Wealth & Health of Nations. La etiqueta del eje x es el siguiente:

svg.append("text") 
    .attr("class", "x label") 
    .attr("text-anchor", "end") 
    .attr("x", width) 
    .attr("y", height - 6) 
    .text("income per capita, inflation-adjusted (dollars)"); 

Y la etiqueta del eje y de esta manera:

svg.append("text") 
    .attr("class", "y label") 
    .attr("text-anchor", "end") 
    .attr("y", 6) 
    .attr("dy", ".75em") 
    .attr("transform", "rotate(-90)") 
    .text("life expectancy (years)"); 

También puede utilizar una hoja de estilos con el estilo de estas etiquetas como desee, ya sea juntos (.label) o individualmente (.x.label, .y.label).

Answer 2

En la nueva versión D3js (versión 3 en adelante), cuando se crea un eje del gráfico a través de d3.svg.axis() función tiene acceso a dos métodos llamados tickValues y tickFormat que se construyen en el interior de la función para que pueda especifica que los valores necesitará las garrapatas a favor y en qué formato desea que aparezca el texto:

var formatAxis = d3.format(" 0"); 
var axis = d3.svg.axis() 
     .scale(xScale) 
     .tickFormat(formatAxis) 
     .ticks(3) 
     .tickValues([100, 200, 300]) //specify an array here for values 
     .orient("bottom"); 

Answer 3

Si desea que la etiqueta del eje y en el medio del eje y como lo hice:

1. texto Girar 90 grados con texto-anclaje medio
2. traducir el texto por su punto medio
   • posición x: para evitar la superposición de etiquetas señalizadoras-eje y (-50)
   • y posición: para que coincida con el punto medio del eje y (chartHeight/2)

ejemplo de código:

var axisLabelX = -50; 
var axisLabelY = chartHeight/2; 

chartArea 
    .append('g') 
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')') 
    .append('text') 
    .attr('text-anchor', 'middle') 
    .attr('transform', 'rotate(-90)') 
    .text('Y Axis Label') 
    ; 

Esto evita la rotación de la w sistema de coordenadas del agujero mencionado por lubar arriba.

Answer 4

D3 proporciona un conjunto de componentes de bajo nivel que puede usar para armar cuadros. Se le proporcionan los componentes básicos, un componente de eje, unión de datos, selección y SVG. ¡Tu trabajo es unirlos para formar una tabla!

Si desea un gráfico convencional, es decir, un par de ejes, etiquetas de ejes, un título de gráfico y un área de trazado, ¿por qué no echar un vistazo a d3fc? es un conjunto de código abierto de más componentes D3 de alto nivel.Incluye un componente de gráfico cartesiano que podría ser lo que necesita:

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(), 
    d3.scaleLinear() 
) 
    .xLabel('Value') 
    .yLabel('Sine/Cosine') 
    .chartLabel('Sine and Cosine') 
    .yDomain(yExtent(data)) 
    .xDomain(xExtent(data)) 
    .plotArea(multi); 

// render 
d3.select('#sine') 
    .datum(data) 
    .call(chart); 

se puede ver un ejemplo más completo aquí: https://d3fc.io/examples/simple/index.html

Answer 5

Si trabaja en d3.v4, como se sugiere, puede utilizar esta instancia ofreciendo todo lo que necesitas

Es posible que desee reemplazar los datos del eje X por sus "días", pero recuerde analizar los valores de cadena correctamente y no aplicar concatenar.

parseTime ¿podría hacer el truco durante días escalando con un formato de fecha?

d3.json("data.json", function(error, data) { 
if (error) throw error; 

data.forEach(function(d) { 
    d.year = parseTime(d.year); 
    d.value = +d.value; 
}); 

x.domain(d3.extent(data, function(d) { return d.year; })); 
y.domain([d3.min(data, function(d) { return d.value; })/1.005, d3.max(data, function(d) { return d.value; }) * 1.005]); 

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x)); 


g.append("g") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d/1000) + "k"; })) 
    .append("text") 
    .attr("class", "axis-title") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .attr("fill", "#5D6971") 
    .text("Population)"); 

fiddle with global css/js

Answer 6

chart.xAxis.axisLabel('Label here'); 

o

xAxis: { 
    axisLabel: 'Label here' 
},