6

D3 でヒートマップとして視覚化したいデータの 2 次元配列があります。

私が見た例から、以下を含む：

https://stackoverflow.com/a/12925448/1647819

http://bl.ocks.org/2605010

行と列を各データ要素の属性としてエンコードする必要があるようです。位置情報の冗長なエンコードを避けるために、データの構造 (つまり、[i][j] 表記でインデックス可能な 2D 配列であるという事実) を利用する方法はありますか?

そうでない場合、位置情報をエンコードするデータ構造を生成する簡潔かつ/または効率的な方法はありますか? つまり、ネストされた for ループ以外のことを意味します。

myData = [[1, 2], [3, 4]]
myDataWithPos = []

nRow = myData.length
nCol = myData[0].length

for (i = 0; i < nRow; i++){
    for(j = 0; j < nCol; j++){
        myDataWithPos.push({val: myData[i][j], row: i, col: j})
    }
}
4

1 に答える 1

5

確かに、2 次元配列のインデックスを使用してヒートマップを描画できます。http://jsfiddle.net/uArga/4/に簡単な例をまとめました。

データが次のようになっていると仮定します。

var data = [[3,5],[9,2]];

最初に、データのサイズとグラフのサイズに基づいてxとのオフセットを計算するための基本的なスケールを設定します。yこれにより、各セルの大きさを手動で再計算することなく、 を変更してグラフのサイズを簡単に変更できますheight。width

var x = d3.scale.linear()
    .range([0, width])
    .domain([0,data[0].length]);

var y = d3.scale.linear()
    .range([0, height])
    .domain([0,data.length]);

その後、各行をヒート マップに追加できます。

var row = svg.selectAll(".row")
             .data(data)
           .enter().append("svg:g")
             .attr("class", "row");

次に、サブセレクトを使用して各セルを行に追加します。これを行うためのよりクリーンな方法があるかもしれませんが、基本的には、各セルのデータと一緒に行番号を取得するだけです。次に、スケールを使用して、各セルのx、y、height、およびを計算します。width

var col = row.selectAll(".cell")
    .data(function (d,i) {return d.map(function(a){return {value: a, row: i};})})
  .enter().append("svg:rect")
    .attr("class", "cell")
    .attr("x", function(d, i) { return x(i); })
    .attr("y", function(d, i) { return y(d.row); })
    .attr("width", x(1))
    .attr("height", y(1))
    .style("fill", function(d) { return colorScale(d.value); });
于 2012-10-26T16:45:51.653 に答える