1

d3.js で、4 つの散布図 (2x2 マトリックス プロットと考えてください) と合計 1000 個までのデータ ポイントを使用して視覚化を作成しようとしています。各プロットには独自の軸セットがあり、1:1 の線と線形適合線が含まれている必要があります。これはすべて 1 つの svg で行われます。

私のブラウザー (chrome) では、数百を超えるデータ ポイントをレンダリングできないようです。この制限を無効にする方法はありますか?

編集:これは、ダミーデータで行っていることのサンプルです。明らかに、第 1 象限のデータ ポイントはプロットされていません。

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

基本的には 1 番目と 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);

(また、「2」グループの x 値にパディングを追加したことに注意してください。)

更新された例を次に示します: http://jsfiddle.net/pzp4h/3/

于 2013-07-23T22:52:58.503 に答える