web-dev-qa-db-ja.com

d3でヒートマップを描く

Csvからのデータを使用してd3でヒートマップを描画しようとしています：これは私がこれまでに持っているものです

与えられたcsvファイル：

row,col,score
0,0,0.5
0,1,0.7
1,0,0.2
1,1,0.4

私は次のようなsvgとコードを持っています：

<svg id="heatmap-canvas" style="height:200px"></svg>

<script>
d3.csv("sgadata.csv", function(data) {
    data.forEach(function(d) { 
    d.score = +d.score;
    d.row = +d.row;
d.col = +d.col;
});
//height of each row in the heatmap
//width of each column in the heatmap
var h = gridSize;
var w = gridSize;
var rectPadding = 60;

$('#heatmap-canvas').empty();

var mySVG = d3.select("#heatmap-canvas")
.style('top',0)
.style('left',0);

var colorScale = d3.scale.linear()
.domain([-1, 0, 1])
.range([colorLow, colorMed, colorHigh]);

rowNest = d3.nest()
.key(function(d) { return d.row; })
.key(function(d) { return d.col; });

dataByRows = rowNest.entries(data);
mySVG.forEach(function(){
var heatmapRow = mySVG.selectAll(".heatmap")
    .data(dataByRows, function(d) { return d.key; })
    .enter().append("g");

    //For each row, generate rects based on columns - this is where I get stuck
    heatmapRow.forEach(function(){
    var heatmapRects = heatmapRow
        .selectAll(".rect")
        .data(function(d) {return d.score;})
        .enter().append("svg:rect")
                    .attr('width',w)
        .attr('height',h)
        .attr('x', function(d) {return (d.row * w) + rectPadding;})
        .attr('y', function(d) {return (d.col * h) + rectPadding;})
        .style('fill',function(d) {
            if(d.score == NaN){return colorNA;}
            return colorScale(d.score);
                 })

})
</script>

私の問題は入れ子にあります。私のネストは2つのキーに基づいており、最初に行（行の生成に使用）、次に各行に複数のネストされたキーがあり、それぞれにスコアが含まれています。続行する方法がわかりません。つまり、列をループして、色付きの長方形を追加します。

どんな助けもいただければ幸いです

javascriptd3.jsheatmap
13
by0

subselect（ d3.jsが長方形のグリッドを構築する を参照）を使用してd3のネストされたデータを操作することもできますが、この場合は実際には必要ありません。 http://jsfiddle.net/QWLkR/2/ であなたのデータを使用して例をまとめました。これが重要な部分です。

var heatMap = svg.selectAll(".heatmap")
    .data(data, function(d) { return d.col + ':' + d.row; })
  .enter().append("svg:rect")
    .attr("x", function(d) { return d.row * w; })
    .attr("y", function(d) { return d.col * h; })
    .attr("width", function(d) { return w; })
    .attr("height", function(d) { return h; })
    .style("fill", function(d) { return colorScale(d.score); });

基本的には、rowとcolを使用して、ヒートマップ内の正方形の正しい位置を計算できます。

10
Bill