Grafici a dispersione, chiedo aiuto/suggerimento

Italiano JavaScript
#1

Ciao! sto sviluppando il progetto per questa challenge, qui di seguito vi copio il mio codice in js attualmente:

document.addEventListener("DOMContentLoaded", () => {
  fetch("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json") .then( resp => resp.json())
     .then( jsonData => {
  const w=500; const h=500; const padding = 60;
  
  const yearDates = jsonData.year.map( item => {
    return item
  })
    
    const xScale = d3.scaleTime().domain([d3.min(yearDates), d3.max(yearDates)]).range([padding, w - padding])
       
        const yScale = d3.scaleLinear()
        .domain([0, d3.max(jsonData.time, d => d)]).range([h-padding, padding])

const svg = d3.select('#graph').append('svg').attr('width', w).attr('height', h);
       
 const xAxis = d3.axisBottom(xScale)
 const yAxis = d3.axisLeft(yScale)   
    
    
    
    
svg.selectAll('circle').data(jsonData).enter().append('circle').attr('cx', (d, i) =>xScale(d[i]))
    
    console.log(jsonData)
     })})

Anche stavolta, ho problemi a stampare nella console i dati contenuti nel json, in modo particolare volevo stampare sia tutto il mio json, che i valori della chiave ‘‘Year’’, nel codice ho inserito il console.log di jsonData, che è tutto il json da voi fornito, ma la console mi dà errore anche stavolta!
Vi chiedo, se ci sono, di segnalarmi obbrobbi o quant’altro :joy: sperando anche in un vostro suggerimento o aiuto! :slight_smile:

#2

che errore ti da? è utile dare anche l’errore quando si chiede aiuto

#3 
TypeError: jsonData.year is undefined

Eppure mi pare di aver mappato l’array bene :thinking:

#4

un po’ di più grazie, così è impossibile dire da dove venga l’errore

#5

Ecco:

Uncaught (in promise) TypeError: jsonData.year is undefined
    <anonymous> http://127.0.0.1:5555/script.js:6
1 Like
#6

aggiungerei un console.log(jsonData) per verificare qual è la struttura di quell’oggetto

#7

Il console.log(jsonData) già c’è nel mio codice, credo che il problema sia che la scrittura jsonData.year non funzioni perchè la chiave ‘‘Year’’ è contenuta e ripetuta in una serie di oggetti nel json, la scrittura attuale praticamente non estrapola niente, vedrò di risolvere grazie!

#8

Credo di aver risolto almeno in parte, ho modificato la mappatura di jsonData, e l’errore che ti avevo postato sopra è scomparso, ma n’è comparso un altro :laughing:
ecco il mio codice sistemato:

document.addEventListener("DOMContentLoaded", () => {

  fetch("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json") .then( resp => resp.json())

     .then( jsonData => {

  const w=500; const h=500; const padding = 60;

 

  const yearDates = jsonData.map( item => {

    return item.Year

  })

   

    const xScale = d3.scaleTime().domain([d3.min(yearDates), d3.max(yearDates)]).range([padding, w - padding])

       

        const yScale = d3.scaleLinear()

        .domain([0, d3.max(jsonData.time, d => d)]).range([h-padding, padding])

const svg = d3.select('#graph').append('svg').attr('width', w).attr('height', h);

       

 const xAxis = d3.axisBottom(xScale)

 const yAxis = d3.axisLeft(yScale)  

               

svg.selectAll('circle').data(jsonData).enter().append('circle').attr('cx', (d, i) =>xScale(d[i]))

   

    console.log(jsonData)

     })})

e il nuovo errore sarebbe:

Uncaught (in promise) ReferenceError: d3 is not defined

Ma credo che comunque l’errore di d3 derivi dal fatto che tutte le impostazioni del grafico non le ho ancora definite, spero possiate confermarmi in caso.

#9

cosa sarebbe d3? dove lo hai definito? è quello il problema, non puoi usare cose che non hanno un valore

1 Like