Javascript 如何更改双色热图中D3的热图？_Javascript_Html_Css_D3.js_Heatmap

Javascript 如何更改双色热图中D3的热图？

javascript html css d3.js

Javascript 如何更改双色热图中D3的热图？,javascript,html,css,d3.js,heatmap,Javascript,Html,Css,D3.js,Heatmap,代码从文件读取数据并生成此热图：但是我希望顶部对角线上的单元格颜色不同，比如渐变蓝，底部对角线上的单元格颜色不同，就像现在一样，我该怎么做呢 <html> <head> <title>Heat map</title> </head> <body> <div id='tooltip' class='hidden'> <p><span id='value'></p> <

代码从文件读取数据并生成此热图：

但是我希望顶部对角线上的单元格颜色不同，比如渐变蓝，底部对角线上的单元格颜色不同，就像现在一样，我该怎么做呢

<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 margin={顶部：75，右侧：10，底部：50，左侧：100}，
细胞大小=12；
col_数=34；
行数=34；
宽度=单元格大小*列号，//-margin.left-margin.right，
高度=单元格大小*行号，//-margin.top-margin.bottom，
网格尺寸=数学地板（宽度/24），
LegendlementWidth=单元大小*2.5，
色桶=11，
颜色=['FFFFFF'、'F1EEF6'、'E6D3E1'、'DBB9CD'、'D19EB9'、'C684A4'、'BB6990'、'B14F7C'、'A63467'、'B1A53'、'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]，//更改为基因名称或探针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]，//更改为基因名称或探针id
行标签=[“从0-14”、“从15-29”、“从30-44”、“从45-59”、“从60-74”、“从75-89”、“从90-104”、“从105-119”、“从120-134”、“从135-149”、“从150-164”、“从165-179”、“从180-194”、“从195-209”、“从210-224”、“从225-239”、“从240-254”、“从255-269”、“从270-284”、“从285-299”、“从300-314”、“从315-329”、“从330-344'，从345-359'，从360-374'，从375-389'，从390-404'，从405-419'，从420-434'，从435-449'，从450-464'，从465-479'，从480-494'，从495-509']，//更改为基因名称或探针id
协作=[至0-14'，至15-29'，至30-44'，至45-59'，至60-74'，至75-89'，至90-104'，至105-119'，至120-134'，至135-149'，至150-164'，至165-179'，至180-194'，至195-209'，至210-224'，至225-239'，至240-254'，至255-269'，至270-284'，至285-299'，至300-314'，至315-329'，至330-344'，至345-359'，至360-374'，至375-389''，“至390-404”，“至405-419”，“至420-434”，“至435-449”，“至450-464”，“至465-479”，“至480-494”，“至495-509”]；//更改为对比名称
d3.tsv（“数据+热图.tsv”，
职能（d）{
返回{
行：+d.row_idx，
列：+d.col\u idx，
值：+d.重复次数
};
},
函数（错误、数据）{
var colorScale=d3.scale.quantile（）
.domain（[0,10]）
.范围（颜色）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
;
var heatMap=svg.append（“g”）
.attr（“类别”、“g3”）
.selectAll（“.cellg”）
.data（数据，函数（d）{返回d.row+“：”+d.col；}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return hccol.indexOf（d.col）*cellSize；}）
.attr（“y”，函数（d）{return hcrow.indexOf（d.row）*cellSize；}）
.attr（“类”，函数（d）{return“cell-cell-border cr”+（d.row-1）+“cc”+（d.col-1）；}）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.style（“fill”，函数（d）{return colorScale（d.value）；}）
;

我在

var heatmap

中使用了一个技巧，将其转换为

.style（“fill”，函数（d）{return colorScale（d.value）；}

并将其更改为

if（d.col
最后，我用颜色声明了三个新变量：
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'];

这是获取此热图的方法：

完整代码：
<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>


热图

var margin={顶部：75，右侧：10，底部：50，左侧：100}，
细胞大小=12；
col_数=34；
行数=34；
宽度=单元格大小*列号，//-margin.left-margin.right，
高度=单元格大小*行号，//-margin.top-margin.bottom，
网格尺寸=数学地板（宽度/24），
LegendlementWidth=单元大小*2.5，
色桶=11，
颜色(底部=[#FFFFFF'、#F1EEF6'、#E6D3E1'、#DBB9CD'、#D19EB9'、#C684A4'、#BB6990'、#B14F7C'、#A63467'、#9B1A53'、#91003F'；
颜色(顶部=[#FFFFFF'、#ebebfa'、#d6d6f5'、#c2c2f0'、#adadeb'、#9999e6'、#8585e0'、#7070db'、#5c5cd6'、#4747d1'、#3333cc']；
颜色对角=[“#FFFFFF”、“#e6ffee”、“#b3ffcc”、“#80ffaa”、“#4df88”、“#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]，//更改为基因名称或探针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]，//更改为基因名称或探针id
行标签=[“从0-14”、“从15-29”、“从30-44”、“从45-59”、“从60-74”、“从75-89”、“从90-104”、“从105-119”、“从120-134”、“从135-149”、“从150-164”、“从165-179”、“从180-194”、“从195-209”、“从210-224”、“从225-239”、“从240-254”、“从255-269”、“从270-284”、“从285-299”、“从300-314”、“从315-329”、“从330-344'，从345-359'，从360-374'，从375-389'，从390-404'，从405-419'，从420-434'，从435-449'，从450-464'，从465-479'，从480-494'，从495-509']，//更改为基因名称或探针id
协作=[至0-14'，至15-29'，至30-44'，至45-59'，至60-74'，至75-89'，至90-104'，至105-119'，至120-134'，至135-149'，至150-164'，至165-179'，至180-194'，至195-209'，至210-224'，至225-239'，至240-254'，至255-269'，至270-284'，至285-299'，至300-314'，至315-329'，至330-344'，至345-359'，至360-374'，至375-389''，“至390-404”，“至405-419”，“至420-434”，“至435-449”，“至450-464”，“至465-479”，“至480-494”，“至495-509”]；//更改为对比名称
d3.tsv（“数据+热图.tsv”，
职能（d）{
返回{
行：+d.row_idx，
列：+d.col\u idx，
值：+d.重复次数
};
},
函数（错误、数据）{
var colorScaleBottom=d3.scale.quantile（）
.domain（[0,10]）
.范围（底部的颜色）；
var colorScaleTop=d3.scale.quan