我正在使用 d3.js 将 80,000 行 .tsv 的内容绘制到图表上。
我遇到的问题是,由于数据太多,页面会在大约 5 秒内无响应,而整个数据集会立即被搅动。
如果数据分布在较长时间段内,是否有一种简单的方法可以逐步处理数据? 理想情况下,该页面将保持响应,并且数据将在可用时绘制,而不是在最后一次大点击
最佳答案
我认为您必须将数据分块并使用 setInterval 或 setTimeout 将其显示在组中。这将为 UI 提供一些喘息的空间,使其可以在中间跳转。
基本方法是: 1)分块数据集 2)分别渲染每个 block 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);
你可以在这里看到一个演示 fiddle ——在我喝咖啡之前完成的——
http://jsfiddle.net/thudfactor/R42uQ/
请注意,我正在为每个数组 block 创建一个具有自己的数据连接的新组。如果您随着时间的推移不断添加到相同的数据连接 ( data(oldData.concat(nextChunk) ),即使您只使用 enter() 选择,整个数据集仍然会被处理和比较,所以它不需要渴望事物开始爬行。
关于javascript - d3 — 逐步绘制大型数据集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19206948/