Javascript heatmap.js plugin to show data step by step in D3.js

Question

I have a D3 using heatmap.js and a dataset empty. I would like to show the heatmap every time I add data in the dataset.

The script:

const self = this;
 h.setData({
  max: 1,
  data: self.newData . // empty
 })
 this.mydata.forEach(function(e){
      self.newData.push(e);
      // self.wait(500)
     h.addData(e);
     h.repaint();
     console.log(self.newData.length)
 })

But the result is not what I wanted, The map is clear. the console.log shows the incremental counter until the last data. and than just at end the map image is updated.

Do you have any idea to fix it?

Answer 1

You will have to use a mechanism which lets the JavaScript engine yield the control back to the rendering engine.

setTimeout is one way to do this:

var data = this.myData;

function addAndRender(i) {
    if (i >= data.length) {
        return;
    }

    e = data[i];
    self.newData.push(e);
    // self.wait(500)
    h.addData(e);
    h.repaint();

    // the delay before next call can be set here (in milliseconds) :
    setTimeout( function(){ addAndRender(i+1); }, 500 );
}

addAndRender(0);