Grafici a dispersione, chiedo aiuto/suggerimento

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:

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

TypeError: jsonData.year is undefined

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

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

Ecco:

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

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

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!

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.

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

1 Like