我正在使用 d3.js 将 80,000 行 .tsv 的内容绘制到图表上。
我遇到的问题是，由于数据太多，页面在大约 5 秒内变得无响应，而整个数据集同时被搅动。
如果数据分布在较长时间段内，是否有一种简单的方法可以逐步处理数据？ 理想情况下，页面将保持响应状态，并且数据将在可用时绘制，而不是在最后一次大命中
【问题讨论】：
标签： javascript svg d3.js data-visualization
我认为您必须将数据分块并使用 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() 选择，整个数据集仍会得到处理和比较，因此不需要渴望东西开始爬行。
【讨论】：