1

我正在尝试在 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 中添加了 aw，如上图所示。

4

1 回答 1

3

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/

于 2013-07-23T22:52:58.503 回答