Javascript heatma.js插件，用于在D3.js中逐步显示数据

Question

我有一个使用heatmap.js的D3，数据集为空。每次在数据集中添加数据时，我都想显示热图。

脚本：

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显示增量计数器，直到最后一个数据。并且不仅仅在最后更新地图图像。

你有什么办法修理它吗？

Answer 1

您必须使用一种机制，让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);