D3 js sélectionnant des rectangles dans

Question

J'essaie de générer une carte de chaleur en utilisant la bibliothèque d3 js v3. Tout en essayant de mapper les données sur la matrice, le mappage des données est effectué verticalement, mais j'ai besoin d'un mappage horizontal des données. S'il vous plaît se référer à l'image ci-jointe pour la sortie attendue.

var data = [ 
 
    {score: 0.5, row: 0, col: 0}, 
 
    {score: 0.7, row: 0, col: 1}, 
 
    {score: 0.2, row: 0, col: 2}, 
 
    {score: 0.4, row: 1, col: 0}, 
 
    {score: 0.2, row: 1, col: 1}, 
 
    {score: 0.4, row: 1, col: 2}, 
 
    {score: 0.4, row: 2, col: 0}, 
 
    {score: 0.2, row: 2, col: 1}, 
 
    {score: 0.4, row: 2, col: 2} 
 
]; 
 

 
//height of each row in the heatmap 
 
//width of each column in the heatmap 
 
var gridSize = 50, 
 
    h = gridSize, 
 
    w = gridSize, 
 
    rectPadding = 60; 
 

 
var colorLow = 'green', colorMed = 'yellow', colorHigh = 'red'; 
 

 
var margin = {top: 20, right: 80, bottom: 30, left: 50}, 
 
    width = 640 - margin.left - margin.right, 
 
    height = 380 - margin.top - margin.bottom; 
 

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

 
var svg = d3.select("#heatmap").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

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

 
var textLable = svg.selectAll(".bartext") 
 
     .data(data); 
 
     textLable.exit().remove(); 
 
     textLable.enter() 
 
       .append("text") 
 
       .attr("class", "bartext") 
 
       .attr("y", function(d) { return d.col * h * 1.2 ; }) 
 
       .attr("x", function(d) { return d.row * w * 1.2 ; }) 
 
    \t \t \t \t \t 
 
       
 
    .attr("height", function(d) { return h; }) 
 
    
 
       .style("text-anchor", "middle")    
 
       
 
       .text(function(d,i){ 
 
       return i ; 
 
       });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script> 
 
<div id='heatmap'></div>

http://jsfiddle.net/QWLkR/2/

Expected Output

Answer 1

Dans votre variable heatmap vous définissez la coordonnée X égale à la fois la ligne largeur, ce qui signifie qu'une rangée supérieure aura un plus Coordonnée X, où elle devrait avoir une coordonnée Y plus élevée. Échangez-les afin que le code fonctionne comme vous le souhaitez.

.attr("x", function(d) { return d.col * h; }) 
.attr("y", function(d) { return d.row * w; })