使用JavaScript在HTML5画布上绘制大量点

我试图在HTML5画布上绘制大量（60k）点，并在Chrome和Firefox中使用D3.js模拟流数据点，发现浏览器在大约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();
    });

问题在于：

data.forEach(function(d,i) {
      context.strokeStyle="red";
      context.lineWidth="1";
      context.lineTo(scale(++k),scale(d));
      context.stroke();//this should be out of the for loop you should be doing it once not everytime
    });

大概是这样的：

data.forEach(function(d,i) {
  context.strokeStyle="red";
  context.lineWidth="1";
  var j = scale(d);
  var m = scale(d++);
  context.lineTo(j,m);
});
context.stroke();

工作代码

---

希望这有帮助

既然你在评论部分问了一个完全不同的问题，我想换一个答案

注释和工作代码内联。

var margin={top:20，right:20，bottom:20，left:40}，
w=100-边距。左-边距。右，
h=100-margin.top-margin.bottom；
var canvas=d3.选择（“画布”）
.node（）；
var context=canvas.getContext（'2d'）；
var data=d3.range（11.map）（函数（）{return Math.random（）*10}）
var x=d3.scale.linear（）.domain（[0,10]）range（[0,700]）；
变量y=d3.scale.linear（）.域（[0,10]）.范围（[10290]）；
var line=d3.svg.line（）
.插入（“基数”）
.x（函数（d，i）{console.log（x（i））；返回x（i）；}）
.y（函数（d）{返回y（d）；}）
//制作虚拟SVG
var path=d3.选择（“主体”）.append（“svg”）.append（“路径”）
.attr（“d”，行（数据））
.attr（“笔划”、“钢蓝”）
.attr（“笔划宽度”、“2”）
.attr（“填充”、“无”）.remove（）；
d3.选择（“主体svg”）.remove（）；
//从0到路径总长度并存储所有点
var点=[]；
对于（var i=0；i如果（points.length）我不知道你想要实现什么样的图表或绘图，但是你考虑过使用WebGL来利用GPU吗？这里的问题是，你是在画布上还是在svg上使用d3制作的。我使用的是画布。我甚至失败了：for（j=0；j<1400；j++）{data=d3.range（40）.map（function（）{return Math.random（）*400}）；我关心的是有60K（x，y）坐标流中的坐标只会导致同样的崩溃。Cyril是否存在可以在画布上而不是SVG中作为路径设置动画的路径，使其看起来类似于？Bob，如果我在上面的答案中回答了您的问题，请将其标记为已接受。对于您的第二个查询，请提出另一个so问题，我可以复制我的另一个answe所以这对其他有类似问题的人是有帮助的。