para - script type= text/javascript src=

etiquetado del 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 de ella para que la gente sepa que el eje x está contando días.

De manera 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

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

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

Answer 2

En la nueva versión D3js (versión 3 en adelante), cuando crea un eje de gráfico a través de la función d3.svg.axis() tiene acceso a dos métodos llamados tickValues y tickFormat que están incorporados dentro de la función para que pueda especificar cuál valores para los que necesita los ticks 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 quieres la etiqueta del eje y en el medio del eje y como hice yo:

1. Gire el texto 90 grados con el medio de anclaje de texto
2. Traduzca el texto por su punto medio
   • x posición: para evitar la superposición de las etiquetas de tilde del eje y ( -50 )
   • y posición: para chartHeight / 2 el punto medio del eje y ( chartHeight / 2 )

Muestra 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 que se gire todo el sistema de coordenadas mencionado por lubar arriba.

Answer 4

Si trabaja en d3.v4, como se sugiere, puede usar esta instancia que ofrece todo lo que necesita.

Puede que desee reemplazar los datos del eje X por sus "días", pero recuerde analizar los valores de cadena correctamente y no aplicar concatenación.

parseTime también 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)");

violín con css / js globales

Answer 5

Las etiquetas de eje no están incorporadas en el componente de eje de D3, pero puede agregar etiquetas usted mismo simplemente agregando un elemento de text SVG. Un buen ejemplo de esto es mi recreación del diagrama de burbujas animado de Gapminder, The Wealth & Health of Nations . La etiqueta del eje x se ve así:

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 como esta:

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 usar una hoja de estilo para .label estas etiquetas como desee, ya sea juntas ( .label ) o individualmente ( .x.label , .y.label ).

Answer 6

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

o

xAxis: {
   axisLabel: ''Label here''
},