d3.js图表​​ - 加快浏览器的性能

Question

我有一个只有12行和缩放的多线图。每行有大约3000个数据点（我需要更多的点！）。在firefox浏览器中查看/缩放此图表几乎无法使用。那不可能是这样，对吧？ 如果我删除数据点的绘图，性能会更好。 以下是一些重要的代码（我使用此演示：http://codepen.io/brantwills/pen/igsoc），只有12行和更多数据点：

dsv("/d3/data.txt", function(error, data) {
data.forEach(function(d) {
  // read data in Array 
});

var zoom = d3.behavior.zoom().x(x).y(y).scaleExtent([1, 10]).on("zoom", zoomed);
var line = d3.svg.line().interpolate("linear")
              .x(function(d) { return x(d.x); })
              .y(function(d) { return y(d.y); });

svg.selectAll('.line').data(data).enter().append("path").attr("class", "line")
    .attr("clip-path", "url(#clip)").attr('stroke', function(d,i){
                  return colors[i%colors.length];
                })
                .attr("d", line);
// draw points on SVG object
var points = svg.selectAll('.dots').data(data).enter().append("g").attr("class", "dots")
                .attr("clip-path", "url(#clip)");

points.selectAll('.dot').data(function(d, index){
                var a = [];
                d.forEach(function(point,i){
                  a.push({'index': index, 'point': point});
                });
                return a;
                })
                .enter()
                .append('circle')
                .attr('class','dot')
                .attr("r", 2.5)
                .attr('fill', function(d,i){
                  return colors[d.index%colors.length];
                })
                .attr("transform", function(d) {
                return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
                );
});