如何从双色热图中的D3更改热图？ [英] How can I change a heatmap from D3 in bicolor heatmap?
本文介绍了如何从双色热图中的D3更改热图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
代码从文件读取数据并生成此热图：
The code reads data from a file and generate this heatmap:
但我希望顶部对角线中的单元格像渐变蓝色和底部对角线中的单元格像现在一样，我该怎么做呢？
But I want the cells in the top diagonal in different color like gradient blue and the cells in the bottom diagonal like now, How can I do it?
<html>
<head>
<title>Heat map</title>
</head>
<body>
<div id='tooltip' class='hidden'>
<p><span id='value'></p>
</div>
<script src='http://d3js.org/d3.v3.min.js'></script>
</select>
<div id='chart' style='overflow:auto; width:960px; height:700px;'></div>
<script type='text/javascript'>
var margin = { top: 75, right: 10, bottom: 50, left: 100 },
cellSize=12;
col_number=34;
row_number=34;
width = cellSize*col_number, // - margin.left - margin.right,
height = cellSize*row_number , // - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = cellSize*2.5,
colorBuckets = 11,
colors = ['#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F'];
hcrow = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34], // change to gene name or probe id
hccol = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34], // change to gene name or probe id
rowLabel = ['From 0-14', 'From 15-29', 'From 30-44', 'From 45-59', 'From 60-74', 'From 75-89', 'From 90-104', 'From 105-119', 'From 120-134', 'From 135-149', 'From 150-164', 'From 165-179', 'From 180-194', 'From 195-209', 'From 210-224', 'From 225-239', 'From 240-254', 'From 255-269', 'From 270-284', 'From 285-299', 'From 300-314', 'From 315-329', 'From 330-344', 'From 345-359', 'From 360-374', 'From 375-389', 'From 390-404', 'From 405-419', 'From 420-434', 'From 435-449', 'From 450-464', 'From 465-479', 'From 480-494', 'From 495-509'], // change to gene name or probe id
colLabel = ['To 0-14', 'To 15-29', 'To 30-44', 'To 45-59', 'To 60-74', 'To 75-89', 'To 90-104', 'To 105-119', 'To 120-134', 'To 135-149', 'To 150-164', 'To 165-179', 'To 180-194', 'To 195-209', 'To 210-224', 'To 225-239', 'To 240-254', 'To 255-269', 'To 270-284', 'To 285-299', 'To 300-314', 'To 315-329', 'To 330-344', 'To 345-359', 'To 360-374', 'To 375-389', 'To 390-404', 'To 405-419', 'To 420-434', 'To 435-449', 'To 450-464', 'To 465-479', 'To 480-494', 'To 495-509']; // change to contrast name
d3.tsv("data_heatmap.tsv",
function(d) {
return {
row: +d.row_idx,
col: +d.col_idx,
value: +d.repetitions
};
},
function(error, data) {
var colorScale = d3.scale.quantile()
.domain([0, 10])
.range(colors);
var svg = d3.select("#chart").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.append("g")
.attr("class","g3")
.selectAll(".cellg")
.data(data,function(d){return d.row+":"+d.col;})
.enter()
.append("rect")
.attr("x", function(d) { return hccol.indexOf(d.col) * cellSize; })
.attr("y", function(d) { return hcrow.indexOf(d.row) * cellSize; })
.attr("class", function(d){return "cell cell-border cr"+(d.row-1)+" cc"+(d.col-1);})
.attr("width", cellSize)
.attr("height", cellSize)
.style("fill", function(d) { return colorScale(d.value); })
;
</script>
</body>
</html>
推荐答案
我解决了 var heatmap into .style（fill，function（d）{return colorScale（d.value）;}） for if（d.col< d.row）{return colorScaleBottom（d.value）; } else {if（d.col == d.row）{return colorScaleDiagonal（d.value）;} else {return colorScaleTop（d.value）;}}}）
I solved used a trick in var heatmap into .style("fill", function(d) { return colorScale(d.value); }) and I changed it for if (d.col < d.row) {return colorScaleBottom(d.value); }else{if(d.col == d.row){return colorScaleDiagonal(d.value);}else{return colorScaleTop(d.value);} } })
最后，我用颜色声明了三个新变量：
Finally I declarated three new variables with the colors:
colors_bottom = ['#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F'];
colors_top = ['#FFFFFF','#ebebfa','#d6d6f5','#c2c2f0','#adadeb','#9999e6','#8585e0','#7070db','#5c5cd6','#4747d1','#3333cc'];
colors_diagonal = ['#FFFFFF','#e6ffee','#b3ffcc','#80ffaa','#4dff88','#00ff55','#00e64d','#00cc44','#00b33c','#00802b','#006622'];
这是获取此热图的方法：
Thats the way to obtain this Heatmap:
完成代码：
<html>
<head>
<title>Heat map</title>
</head>
<body>
<div id='tooltip' class='hidden'>
<p><span id='value'></p>
</div>
<script src='http://d3js.org/d3.v3.min.js'></script>
<div id='chart' style='overflow:auto; width:960px; height:700px;'></div>
<script type='text/javascript'>
var margin = { top: 75, right: 10, bottom: 50, left: 100 },
cellSize=12;
col_number=34;
row_number=34;
width = cellSize*col_number, // - margin.left - margin.right,
height = cellSize*row_number , // - margin.top - margin.bottom,
gridSize = Math.floor(width / 24),
legendElementWidth = cellSize*2.5,
colorBuckets = 11,
colors_bottom = ['#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F'];
colors_top = ['#FFFFFF','#ebebfa','#d6d6f5','#c2c2f0','#adadeb','#9999e6','#8585e0','#7070db','#5c5cd6','#4747d1','#3333cc'];
colors_diagonal = ['#FFFFFF','#e6ffee','#b3ffcc','#80ffaa','#4dff88','#00ff55','#00e64d','#00cc44','#00b33c','#00802b','#006622'];
hcrow = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34], // change to gene name or probe id
hccol = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34], // change to gene name or probe id
rowLabel = ['From 0-14', 'From 15-29', 'From 30-44', 'From 45-59', 'From 60-74', 'From 75-89', 'From 90-104', 'From 105-119', 'From 120-134', 'From 135-149', 'From 150-164', 'From 165-179', 'From 180-194', 'From 195-209', 'From 210-224', 'From 225-239', 'From 240-254', 'From 255-269', 'From 270-284', 'From 285-299', 'From 300-314', 'From 315-329', 'From 330-344', 'From 345-359', 'From 360-374', 'From 375-389', 'From 390-404', 'From 405-419', 'From 420-434', 'From 435-449', 'From 450-464', 'From 465-479', 'From 480-494', 'From 495-509'], // change to gene name or probe id
colLabel = ['To 0-14', 'To 15-29', 'To 30-44', 'To 45-59', 'To 60-74', 'To 75-89', 'To 90-104', 'To 105-119', 'To 120-134', 'To 135-149', 'To 150-164', 'To 165-179', 'To 180-194', 'To 195-209', 'To 210-224', 'To 225-239', 'To 240-254', 'To 255-269', 'To 270-284', 'To 285-299', 'To 300-314', 'To 315-329', 'To 330-344', 'To 345-359', 'To 360-374', 'To 375-389', 'To 390-404', 'To 405-419', 'To 420-434', 'To 435-449', 'To 450-464', 'To 465-479', 'To 480-494', 'To 495-509']; // change to contrast name
d3.tsv("data_heatmap.tsv",
function(d) {
return {
row: +d.row_idx,
col: +d.col_idx,
value: +d.repetitions
};
},
function(error, data) {
var colorScaleBottom = d3.scale.quantile()
.domain([0, 10])
.range(colors_bottom);
var colorScaleTop = d3.scale.quantile()
.domain([0, 10])
.range(colors_top);
var colorScaleDiagonal = d3.scale.quantile()
.domain([0, 10])
.range(colors_diagonal);
var svg = d3.select("#chart").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.append("g")
.attr("class","g3")
.selectAll(".cellg")
.data(data,function(d){return d.row+":"+d.col;})
.enter()
.append("rect")
.attr("x", function(d) { return hccol.indexOf(d.col) * cellSize; })
.attr("y", function(d) { return hcrow.indexOf(d.row) * cellSize; })
.attr("class", function(d){return "cell cell-border cr"+(d.row-1)+" cc"+(d.col-1);})
.attr("width", cellSize)
.attr("height", cellSize)
.style("fill", function(d) {
if (d.col < d.row) {return colorScaleBottom(d.value); }
else {
if(d.col == d.row){return colorScaleDiagonal(d.value);}
else{return colorScaleTop(d.value);} } })
;
</script>
</body>
</html>
这篇关于如何从双色热图中的D3更改热图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
