d3 - 逐步绘制大型数据集

Question

d3 - 逐步绘制大型数据集

javascriptsvgd3.jsdata-visualization

5

我正在使用d3.js将80000行的.tsv文件内容绘制成图表。

我遇到的问题是，由于有太多的数据，当整个数据集一次性地进行处理时，页面变得不响应，需要大约5秒的时间。

如果数据在较长的时间段内分散出来，是否有一种简便的方法可以逐步处理数据？理想情况下，页面应保持响应，并且数据会随着可用性而被绘制，而不是在结束时一次性绘制。

- swanny

我不完全确定你的意思，但几乎可以肯定的是答案是否定的——没有简单（或内置）的方法来做到这一点。你必须自己控制渲染。 - Lars Kotthoff

我自己也问过类似的问题。这取决于您的用例。您可以分块检索数据，或在服务器上将数据预处理为较小的集合，然后再加载到客户端。 - Phuoc Do

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Williams · Accepted Answer

我认为您需要将数据划分为一组，并使用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/

需要注意的是，我为每个数组块创建了一个新的组，并使用自己的数据连接。如果你在同一个数据连接上不断添加数据，例如 data(oldData.concat(nextChunk))，即使只使用enter()选择器，整个数据集仍然会被处理和比较，使得性能很快会受到影响。