This seems to be a promise error but when I console.log in my Chart class it works fine. Here is the relevant part of the Chart class:

createScales(){
    console.log(this.data); //this works fine, data is type 'object'.
    this.keynames = d3.scaleOrdinal();

    this.keynames.domain(Object.keys(this.data[0]).filter(function(key){
      console.log(key); //this works fine too, column keys are returned.
      return key !== 'date';
    }));

    this.keymap = this.keynames.domain().map(function(keyname) {
      return{
        name: keyname,
        values: this.data.map(function(d){ //here is the error
          return {
            date: d.date,
            key: +d[keyname]
          }
        })
      }
    });

I'm new to javascript and some terminology is still unfamiliar to me. Why is data undefined inside this.keymap but works just fine when logged outside?

This is the full traceback:

chart.js:46 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
    at chart.js:46
    at Array.map (<anonymous>)
    at Chart.createScales (chart.js:43)
    at Chart.draw (chart.js:30)
    at Chart.setData (chart.js:116)
    at init (plot.js:15)
(anonymous) @ chart.js:46
createScales @ chart.js:43
draw @ chart.js:30
setData @ chart.js:116
init @ plot.js:15
Promise.then (async)
(anonymous) @ plot.js:12

This is how I'm passing my data to chart.js:

let getData = d3.csv('d1.csv', function(d){
                        //data returning stuff here, works fine 
                        }
                      }).then(init);

function init(data){
  chart.setData(data); //updates constructor with new data
}

As I previously stated, my data works fine when read from the Chart class. Does anyone know what's going on?