Tengo un elemento SVG que quiere ser un gráfico de líneas. El eje x del gráfico debe mostrar años (mejor con intervalos de 1 año: 1980, 1981, ...)
Mi conjunto de datos tiene valores de año que extraigo en una variable d3.extent que devuelve los valores de 2 años que necesito como extensión de mi xAxis.
var timeExtent (2) [1980, 2019]
luego declaro xScale:
let xScale = d3.scaleTime() .domain(timeExtent) .range([0, width]);entonces declaro xAxis:
let x_axis = d3.axisBottom(xScale);luego agrego mi elemento svg con un xAxis:
lineGraph_svg.append("g") .attr("class", "x axis") .attr("transform", `translate(${margin},${height})`) .call(x_axis.tickFormat(d3.timeFormat("%Y"))) .selectAll("text") .style("text-anchor", "end") .attr("transform", "rotate(-65)")Ahora, xAxis en html solo muestra repetidamente el año 1970. El año 1970 ni siquiera está en el conjunto de datos.
¿Cómo puedo mostrar correctamente mis años desde 1980 hasta 2019 en el xAxis?
Eso es de esperar, está pasando números a una escala que espera objetos de fecha:
const timeExtent = [1980, 2019]; let xScale = d3.scaleTime() .domain(timeExtent); console.log(xScale.domain()); <script src="https://d3js.org/d3.v7.min.js"></script> Ese número se pasará internamente a new Date , que tratará ese 2019 suyo no como el año 2019 sino como 2019 milisegundos desde el 1 de enero de 1970 UTC.
En su lugar, pase los objetos de fecha adecuados a la escala:
const timeExtent = [1980, 2019]; const parser = d3.timeParse("%Y"); let xScale = d3.scaleTime() .domain(timeExtent.map(parser)); console.log(xScale.domain()); <script src="https://d3js.org/d3.v7.min.js"></script>