D3 reading promise data into a constructor

user_15214059 0
Viewed 44
const chart = new Chart({
  element: document.querySelector('#graph'),
  data: d3.csv('d1.csv', function(d){
                          function removeNaN(e,c){
                            if (e>0) {return e} else {return c}
                          }
                          return { date: d3.timeParse("%Y-%m-%d")(d.Date),
                                   aapl : d.AAPL, tsla : d.TSLA,
                                   aapl_sma: removeNaN(+d.SMA_AAPL,d.AAPL),
                                   tsla_sma: removeNaN(+d.SMA_TSLA,d.TSLA)
                          }
                        }).then(function(data){return data})
});

Hello- this is how I'm initializing my Chart() object. then() returns a Promise object that I would like to access. [[PromiseResult]] contains the data array I'd like to use. How do I access the array, and should it be done from within the Chart() class, or from the chart object?

This is the constructor:

class Chart{
  constructor(opts){
    this.data = opts.data;
    this.element = opts.element;

    this.draw();
  }
d3.js javascript
1 Answers

Fixed:

const chart = new Chart({element: document.querySelector('#graph')});

function init(data){
  chart.setData(data);
}

let getD1 = d3.csv('d1.csv', function(d){
                        function removeNaN(e,c){
                          if (e>0) {return e} else {return c}
                        }
                        return { date: d3.timeParse("%Y-%m-%d")(d.Date),
                                 aapl : d.AAPL, tsla : d.TSLA,
                                 aapl_sma: removeNaN(+d.SMA_AAPL,d.AAPL),
                                 tsla_sma: removeNaN(+d.SMA_TSLA,d.TSLA)
                        }
                      });

I'm using a scroller, so this is implemented with the scroller:

var gs = d3.graphScroll()
    .container(d3.select('#container'))
    .graph(d3.selectAll('.container #graph'))
    .eventId('uniqueId1')  // namespace for scroll and resize events
    .sections(d3.selectAll('.container #sections > div'))
    // .offset(innerWidth < 900 ? innerHeight - 30 : 200)
    .on('active', function(i){
      data2get[i].then(init); //calling .then on d3.csv() passes data to my class.
      chart.setColor(colors[i]);
    });
user_152140590
Related