如何覆盖 d3.js 对可以呈现的元素数量的限制？

Question

我正在尝试在 d3.js 中创建一个可视化，有 4 个散点图（想想 2x2 矩阵图）和总共约 1000 个数据点。每个图都应该有自己的一组轴，并包括 1:1 线和线性拟合线。这一切都发生在一个 svg 中。

我的浏览器 (chrome) 似乎无法渲染超过几百个数据点。有没有办法覆盖这个限制？

编辑：这是我对虚拟数据所做的示例。显然，第一象限中的数据点没有被绘制出来。

svg.selectAll("circle")
            .data(two)
            .enter()
            .append("circle")
            .attr("cx", function(d){
                return (w + xscale(d[0]));
            })
            .attr("cy", function(d){
                return yscale(d[1]);
            })
            .attr("r", 2);

第一张图和第二张图我基本用了相同的代码，只是在cx上加了一个w，如上图。

Answer 1

svg.selectAll("circle") 调用相互干扰。你需要区分你的圈子组；例如，通过为每个类添加一个类：

svg.selectAll("circle.one")
  .data(one)
  .enter()
  .append("circle")
  .attr("class","one")
  .attr("cx", function(d){
    return xscale(d[0]);
  })
  .attr("cy", function(d){
    return yscale(d[1]);
  })
  .attr("r", 2);

...

svg.selectAll("circle.two")
  .data(two)
  .enter()
  .append("circle")
  .attr("class","two")
  .attr("cx", function(d){
    return (w + padding + xscale(d[0]));
  })
  .attr("cy", function(d){
    return yscale(d[1]);
  })
  .attr("r", 2);

（另外，请注意，我为“two”组的 x 值添加了填充。）

这是您的示例，已更新：http://jsfiddle.net/pzp4h/3/