[英]Drawing heatmap with 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個鍵,第一行(用於生成行),然后對於每一行,列有多個嵌套鍵,每個鍵都包含我的分數。 我不知道如何繼續,即循環遍歷列並添加顏色的矩形
任何幫助,將不勝感激
雖然您可以使用子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
來計算熱圖中正方形的正確位置。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.