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);

（另请注意，我将填充添加到“两个”组的x值。）

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

如何覆盖d3.js对可渲染元素数量的限制？

1 个答案: