d3 - 逐步绘制一个大型数据集

Question

我正在使用d3.js将80,000行.tsv的内容绘制到图表上。

我遇到的问题是，由于数据太多，页面在aprox 5秒内没有响应，而整个数据集一次被搅拌。

如果数据在更长的时间内传播，是否有一种简单的方法可以逐步处理数据？ 理想情况下，页面将保持响应，并且数据将在可用时绘制，而不是在最后一次大打击

Answer 1

我认为您必须使用setInterval或setTimeout将数据分块并显示在组中。这将为UI提供一些在中间跳跃的喘息空间。

基本方法是： 1）对数据集进行分块 2）分别渲染每个块 3）跟踪每个渲染组

以下是一个例子：

var dataPool = chunkArray(data,100);
function updateVisualization() {
    group = canvas.append("g").selectAll("circle")
    .data(dataPool[poolPosition])
    .enter()
    .append("circle")
    /* ... presentation stuff .... */

}

iterator = setInterval(updateVisualization,100);

你可以看到这个演示小提琴 - 在我喝咖啡之前完成 - 这里：

http://jsfiddle.net/thudfactor/R42uQ/

请注意，我正在为每个数组块创建一个具有自己的数据连接的新组。如果随着时间的推移不断添加相同的数据连接（数据（oldData.concat（nextChunk）），即使您只使用enter（）选项，整个数据集仍会被处理和比较，因此不需要事情要开始爬行了。