我正在尝试在HTML5画布上绘制巨大(60k)数量的(x,y)点,并使用D3.js在Chrome和Firefox中模拟流数据点,但发现浏览器在约10秒后会冻结和崩溃。
我是通过以下方式生成随机值的数据集:
我是通过以下方式生成随机值的数据集:
var data = d3.range(60000).map(function() { return Math.random() * 500; });
将数据生成分成多个部分是否有帮助?我觉得这可能是因为尝试一次性存储如此大的数据集所导致的,就像我展示的那样。
有没有办法可以防止这种情况发生?例如绘制和保存较小的部分作为平铺图像?
添加的代码:
var margin = {top: 20, right: 20, bottom: 20, left: 40},
w = 100 - margin.left - margin.right,
h = 100 - margin.top - margin.bottom;
var canvas = d3.select("canvas")
.node();
var context = canvas.getContext('2d');
var scale = d3.scale.linear()
. range([0,w])
.domain([0,h]);
data = d3.range(60000).map(function(){return Math.random()*500});
data.forEach(function(d,i) {
context.strokeStyle="red";
context.lineWidth="1";
context.lineTo(scale(++k),scale(d));
context.stroke();
});