Dessiner le plan thermique avec d3

J'essaie de dessiner un plan thermique avec d3 en utilisant les données d'un csv: c'est ce que j'ai jusqu'ici

Étant donné 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 un 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 concerne l'imbrication. Ma nidification est basée sur 2 touches, la première ligne (utilisée pour générer les lignes) puis pour chaque ligne, il y a plusieurs clés imbriquées pour les colonnes et chacune de celles-ci contient mon score. Je ne sais pas comment procéder, c.-à-d. Passer sur les colonnes et ajouter des rectangles aux couleurs

• D3.select par valeur d'attribut
• D3 update data and update graph
• Utilisation des données JSON dans la visualisation JavaScript de D3
• Comment puis-je assurer que D3 termine de charger plusieurs CSV avant que javascript ne s'exécute?
• Comment créer des plans d'étage qui fonctionnent bien avec les navigateurs mobiles et de bureau?

Toute aide serait appréciée

• Comparaison entre d3.js et chart.js (uniquement pour les graphiques)
• Combinaison d3.js et backbone.js
• Sélectionnez les données d'un CSV avant de le charger avec javascript (bibliothèque d3)
• D3.js – comment calculer automatiquement les longueurs d'arc dans le dendrogramme radial
• Graphique acyclique dirigé utilisant d3.js sans DOT

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