• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

127
Views
Registro de valores de año en xAxis

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.

Salida del eje x

¿Cómo puedo mostrar correctamente mis años desde 1980 hasta 2019 en el xAxis?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error