d3

Question

मैं एक 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 कुंजी पर आधारित है, पंक्ति पहले (पंक्तियों को उत्पन्न करने के लिए उपयोग की जाती है) फिर प्रत्येक पंक्ति के लिए, कॉलम के लिए कई नेस्टेड कुंजी होती हैं और इनमें से प्रत्येक में मेरा स्कोर होता है। मुझे यकीन है कि स्तंभों पर यानी पाश आगे बढ़ना और रंग

किसी भी मदद

Answer 1

सराहना की जाएगी आप इस्तेमाल किया सकता है के साथ आयतों को जोड़ने का तरीका नहीं कर रहा हूँ एक subselect (d3.js building a grid of rectangles देखें) 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 अपने हीटमैप में वर्गों की सही स्थिति की गणना करने के लिए उपयोग कर सकते: यह महत्वपूर्ण हिस्सा है।