es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El eje y de d3.js no muestra correctamente los meses.

30 Jul, 2023 Programación

Simplemente estoy tratando de crear un eje y etiquetado de enero a diciembre, pero no entiendo por qué mi código crea: enero, marzo, marzo, abril…. diciembre. ¿Alguien me puede explicar esto por favor?
¡Gracias!

const w = 1078;
const h = 666;
const padding = 70;

const svg = d3
  .select("#svg-container")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

const months = Array(12)
  .fill(0)
  .map((v, i) => new Date().setMonth(i));

const yScale = d3
  .scaleTime()
  .domain([months[11], months[0]])
  .range([h - padding, padding]);

const yAxis = d3
  .axisLeft(yScale)
  .tickValues(months)
  .tickFormat(d3.timeFormat("%B"));

svg
  .append("g")
  .attr("transform", "translate(" + padding + ", -20)")
  .attr("id", "y-axis")
  .call(yAxis);

body {
  background: gray;
}

svg {
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="svg-container"></div>
Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema radica en el array months. El método .setMonth() establece el mes del objeto de fecha en su lugar, por lo que cada elemento en el array se establece en un mes diferente, pero todos comparten el mismo año. Esto significa que cuando se llama al método tickFormat(), se utiliza el valor del mes como representación del tiempo, pero no tiene en cuenta el hecho de que todos están en el mismo año. Para solucionar esto, puedes establecer el valor del año para cada elemento en el array months como el mismo, por ejemplo 2020.

    El código actualizado para crear el array months sería:

    const year = 2020;
const months = Array(12)
  .fill(0)
  .map((v, i) => new Date(year, i, 1));

    Esto crea un array de objetos Date con el año establecido en 2020, y los valores de mes y día aumentan de enero a diciembre. Esto debería hacer que el eje y esté etiquetado con los meses en el orden correcto.

Comments are closed.