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

0

212
Views
D3.js rect no se muestra en el gráfico

Empecé el reto D3.js en FreeCodeCamp, el problema es que lo resolví con el gráfico pero solo me da un display en el recto, solo uno con el ancho y alto que le puse, a continuación muestro el código .

Todo el código en

 <script> //set d3 var w = 1000, h = 500; var padding = 50; var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h) //title svg.append('text') .attr('x', w / 2) .attr('y', 50) .text('United States GDP') fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then((result)=>result.json()) .then((data)=>{ var the_data = data['data'] //get vals var get_max = d3.max(data['data']) var get_mix = d3.min(data['data']) //for x var max_x = Number(get_max[0].split('-')[0]) var min_x = Number(get_mix[0].split('-')[0]) //for y var max_y = get_max[1] var min_y = get_mix[1] var xScale = d3.scaleLinear() .domain([min_x, max_x]) .range([padding, w-padding]) var yScale = d3.scaleLinear() .domain([min_y, max_y]) .range([h-padding, padding]) //the_chars for(var i in the_data){ var get_year = Number(the_data[i][0].split('-')[0]) the_data[i][0] = get_year } svg.selectAll('rect') .data(the_data) .enter() .append('rect') .attr("x", (d) => { xScale(d[0]) }) .attr('y', (d)=>{ yScale(d[1]) }) .attr("width", 200) .attr("height", 20) //axis const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); //display axis svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); svg.append('g') .attr('transform', 'translate(' + padding + ', 0)') .call(yAxis) })

Ahora, ¡qué debo hacer para mostrar los gráficos!

Menciono que las etiquetas del script están incrustadas en el cuerpo.

about 3 years ago · Santiago Trujillo
1 answers
Answer question

0

  1. Problema : funciones de flecha sin valor de retorno. Solución : en su lugar, utilice un retorno explícito o implícito.
 .attr("x", (d) => { xScale(d[0]) }) // returns undefined .attr("x", (d) => xScale(d[0])) // implicit return .attr("x", (d) => { return xScale(d[0]) }) // explicit return
  1. Problema : valor de altura fijo. Solución Evalúe la altura de cada uno según el valor del PIB ( d[1] ) en su lugar.
 .attr('height', 20) // fixed height .attr('height', d => yScale(min_y) - yScale(d[1])) // subtract from min range to account for padding and inverted y coordinates in SVG

Solución completa en este codepen

Captura de pantalla de la solución

about 3 years ago · Santiago Trujillo 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