0

したがって、私は Javascript (特に D3 ライブラリ) を使用するのが初めてで、次の例と似ていないことをしようとしています: http://mbostock.github.com/d3/talk/20111116/iris-splom.html。私の場合、各セルは同じもので、まったく同じスケールの 4 x 4 グリッドです。

私の場合、トップレベルの要素はプレートです。各プレートには、値 (必要に応じてヒートマップ) の行と列の交点に行と列があります。適切なプレート要素を作成できました。ただし、すべてのプレートのデータは、適切にネストされるのではなく、各要素の下に存在します。各「プレート」が同じであることを確認できるように画像を添付しようとしました。基礎となるドキュメント構造を見ると同じであり、基本的に各長方形は 2 つのオーバーレイされたデータ ポイントです。

マイクの例 (上のリンク) を詳しく見ると、クロス関数を使用してデータのネストを支援しているように見えます。皆様のご協力に感謝いたします。

以下にコードを掲載しました

    d3.csv("plateData.csv", function(data) {

  var m = 20,
      w = 400,
      h = 300,
      x_extent = d3.extent(data, function(d){return d.Rows}),
      y_extent = d3.extent(data, function(d){return d.Columns}),
      z_extent = d3.extent(data, function(d){return d.Values});


         var x_scale = d3.scale.linear()
             .range([m, w-m])
             .domain(x_extent)
        var y_scale = d3.scale.linear()
             .range([h-m,m])
             .domain(y_extent)   

        var ramp=d3.scale.linear()
                .domain(z_extent)
                .range(["blue","red"]);

    // Nest data by Plates
  var plates = d3.nest()
      .key(function(d) { return d.Plate; })
      .entries(data);   


  // Insert an svg element (with margin) for each plate in our dataset. 
var svg = d3.select("body").selectAll("svg")
      .data(plates)
        .enter().append("svg:svg")
      .attr("width", w)
      .attr("height", h)
//add grouping and rect 
    .append("svg:g")
    .selectAll('rect')
          .data(data)
          .enter()
     .append('svg:rect')
            .attr('x', function(d){return x_scale(d.Rows)})
            .attr('y', function(d){return y_scale(d.Columns)})
            .attr('width', 10)
            .attr('height', 10)
            .style('fill', function(d){return ramp(d.Values)});
  }
);

AND の例 データ:

Plate,Rows,Columns,Values
12345,1,1,1158.755
12345,1,2,1097.768
12345,1,3,1097.768
12345,1,4,914.807
12345,2,1,1189.249
12345,2,2,1128.261
12345,2,3,1433.197
12345,2,4,701.352
12345,3,1,914.807
12345,3,2,1433.197
12345,3,3,1189.249
12345,3,4,1402.703
12345,4,1,1158.755
12345,4,2,1067.274
12345,4,3,701.352
12345,4,4,1372.21
56987,1,1,20.755
56987,1,2,97.768
56987,1,3,97.768
56987,1,4,14.807
56987,2,1,89.249
56987,2,2,28.261
56987,2,3,33.197
56987,2,4,15.352
56987,3,1,2000.807
56987,3,2,14.197
56987,3,3,89.249
56987,3,4,402.703
56987,4,1,158.755
56987,4,2,3067.274
56987,4,3,701.352
56987,4,4,182.21
4

1 に答える 1

1

問題には2つの原因があります。

  1. ネストされたグループごとに1つのsvg要素を挿入していますが、各要素の位置を定義していません（すべての要素が本体にあります）。

  2. ネストされた構造を考慮せずに、本文内のすべてのsvg要素を選択し、データ要素ごとに1つの長方形を追加します。

1つの解決策は、ボディ内に1つのsvg要素を作成し、プレートごとに1つのグループを作成し、各プレートの位置を定義し、グループをその位置（svg要素内）に変換してから、ヒートマップの長方形を作成することです。

于 2012-08-09T16:30:00.743 に答える