Estoy tratando de visualizar datos con un gráfico de barras usando d3.js, aquí está mi código en javascript:
[
let height = 660; let width = "100%"; let svgElment = d3.select('main') .append('div') svgElment .append('text') .attr("x" , 250) .attr("y" , 50) .attr('id' , "title") .text("Federal economic reserve"); svgElment.append('svg') .attr("width" , width) .attr("height" , height) .attr("id" , "svg-content"); fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => { d3.select('svg') .selectAll('rect') .data(data.data) .enter() .append('rect') .attr('fill' , 'lightblue') .attr('width' , 1) .attr('height' , data => console.log(d3.scaleLinear().domain([0 , d3.max(data[1])]).range([0 , height]))) .attr("x" , (data , index) => (index * 2)) .attr("y" , (data , index) => height - data[1])} ) .catch(err => console.log(err)); <script src="https://d3js.org/d3.v7.min.js"></script>] 1
sin embargo, no entiendo la función de escala, cuando intento ejecutar mi código en Chrome, dice que tengo un TypeError (no es iterable) como en esta imagen
//code by @kentinhogbonouto let height = 520; let width = 963; let barWidth = 935; let paddingTop = 25; let paddingBottom = 25; let paddingLeft = 25; let paddingRight = 25; let marginTop = 25; let marginBottom = 25; let marginLeft = 25; let marginRight = 25; let svgElment = d3.select('main').append('section'); svgElment .append('div') .append('h1') .attr('id' , "title") .text("United State GDP"); svgElment .append('div') .append('svg') .attr("width" , width) .attr("height" , height) .attr("id" , "svg-content"); let dataSet = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json'; fetch(dataSet) .then(response => response.json()) .then(data => { "use strict"; let GDP = data.data.map(data => data[1]); console.log(GDP) let gdpLenght = GDP.lenght; let dataMax = d3.max(GDP); let xScale = d3.scaleLinear().domain([0 , (GDP.lenght)]).range([0 , barWidth]); let yScale = d3.scaleLinear().domain([0 , dataMax]).range([0 , (height-paddingBottom)]); let xAxisValue = d3.scaleLinear().domain([0 , dataMax]).range([0 , barWidth]); console.log(xAxisValue) const xAxis = d3.axisBottom(xAxisValue); const yAxis = d3.axisLeft(yScale); d3.select('svg') .append('g') .selectAll('rect') .data(data.data) .enter() .append('rect') .attr("class" , "bar") .attr('fill' , '#ffcc10') .attr('width' , 2.5) .attr('height' , data => yScale(data[1])) .attr("x" , (data , index) => index * (960/275)) .attr("y" , (data , index) => ((height - paddingBottom) - yScale(data[1]))); d3.select('svg') .append('g') .attr('id' , 'x-axis') .attr("transform" , `translate(25 , ${height - paddingBottom})`) .call(xAxis); d3.select('svg') .append('g') .attr('id' , 'y-axis') .attr("transform" , `translate(${paddingBottom} , 0)`) .call(yAxis) d3.select('svg') .append('g') .append('text') .attr('id' , "title-tl") .attr('x' , -350) .attr('y' , 40) .attr("transform" , "rotate(-90)") .text("Grosse domestique product"); } ) .catch(err => console.log(err)); #container{ display : flex; justify-content : center; align-items : center } #svg-content{ background : #fff; } #title{ text-align : center; font-size : 32px; margin-bottom : 0px; } .data-container--32654{ background-color : #f1f1f1 } .bar:hover{ background-color : blue } <script src="https://d3js.org/d3.v7.min.js"></script> <main id="container"></main>