Dessin de heatmap avec d3

Je suis en train de dessiner une heatmap avec d3 à l'aide de données d'un fichier csv: c'est ce que j'ai jusqu'à présent

Donnée d'un fichier csv:

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

J'ai un svg et le code comme suit:

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

Mon problème est avec la nidification. Mon nidification est basée sur les touches 2, la ligne premier (utilisé pour générer les lignes), puis pour chaque ligne, il y a plusieurs clés imbriquées pour les colonnes, et chacune d'entre elles contiennent de mon score.
Je ne suis pas sûr de savoir comment procéder c'est à dire de la boucle sur les colonnes et ajouter des rectangles avec les couleurs

Toute aide serait appréciée

source d'informationauteur by0

  1. 10

    Alors que vous aviez utilisé un subselect (voir d3.js la construction d'une grille de rectangles) à travailler avec les données imbriquées dans d3 ce n'est pas vraiment nécessaire dans ce cas. J'ai mis en place un exemple d'utilisation de vos données à http://jsfiddle.net/QWLkR/2/. C'est la clé de la partie:

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

    Essentiellement, vous pouvez simplement utiliser le row et col pour calculer la position correcte des places dans votre heatmap.