[英]Drawing heatmap with d3
I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far 我正在尝试使用来自csv的数据绘制带有d3的热图:这是我到目前为止所拥有的
Given a csv file: 给出一个csv文件:
row,col,score
0,0,0.5
0,1,0.7
1,0,0.2
1,1,0.4
I have an svg and code as follows: 我有一个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>
My problem is with the nesting. 我的问题在于嵌套。 My nesting is based on 2 keys, row first (used to generate the rows) then for each row, there are multiple nested keys for the columns and each of these contain my score. 我的嵌套基于2个键,第一行(用于生成行),然后对于每一行,列有多个嵌套键,每个键都包含我的分数。 I am not sure how to proceed ie loop over columns and add rectangles with the colors 我不知道如何继续,即循环遍历列并添加颜色的矩形
Any help would be appreciated 任何帮助,将不胜感激
While you could used a subselect
(see d3.js building a grid of rectangles ) to work with nested data in d3
it's not really needed in this case. 虽然您可以使用子subselect
(请参阅d3.js构建矩形网格 )来处理d3
的嵌套数据,但在这种情况下并不需要。 I put together an example using your data at http://jsfiddle.net/QWLkR/2/ . 我在http://jsfiddle.net/QWLkR/2/上使用您的数据汇集了一个示例。 This is the key part: 这是关键部分:
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); });
Basically you can just use the row
and col
to calculate the correct position of the squares in your heatmap. 基本上你可以使用row
和col
来计算热图中正方形的正确位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.