Плагин Javascript heatmap.js для пошагового отображения данных в D3.js - PullRequest
Новая
       25

Плагин Javascript heatmap.js для пошагового отображения данных в D3.js

0 голосов
/ 02 ноября 2019

У меня есть D3 с использованием heatmap.js и набор данных пуст. Я хотел бы показывать тепловую карту каждый раз, когда добавляю данные в набор данных.

Сценарий: 

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)
 })

Но результат не тот, который я хотел! Карта ясна, console.log показывает инкрементный счетчик до последних данных. и, наконец, изображение карты обновляется.

У вас есть идея, чтобы это исправить?

1 Ответ

0 голосов
/ 02 ноября 2019

Вам придется использовать механизм, который позволяет механизму JavaScript возвращать управление механизму рендеринга.

setTimeout - это один из способов сделать это: 

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);
...