d3.js 热图中的 hccol 和 hcrow 是什么？

Question

我是 d3 的新手，但我正在尝试使用 hcrow 和 hccol 根据 this example. However, I just don't understand what hcrow and hccol signify. I googled it a little bit, and found this 较短的示例制作热图。这些是什么意思？它们如何影响热图？

第一个例子中的

hcrow和hccol如下：

hcrow = [49,11,30,4,18,6,12,20,19,33,32,26,44,35,38,3,23,41,22,10,2,15,16,36,8,25,29,7,27,34,48,31,45,43,14,9,39,1,37,47,42,21,40,5,28,46,50,17,24,13], // change to gene name or probe id
hccol = [6,5,41,12,42,21,58,56,14,16,43,15,17,46,47,48,54,49,37,38,25,22,7,8,2,45,9,20,24,44,23,19,13,40,11,1,39,53,10,52,3,26,27,60,50,51,59,18,31,32,30,4,55,28,29,57,36,34,33,35], // change to gene name or probe id

在第二个例子中：

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

我知道 hcrow.length 是热图的行数，hccol.length 是热图的列数...但是数组中的值是什么意思？据我所知，两者都是创建网格和生成 x,y 点的方法，对吗？但是拥有一个无序列表有什么意义呢？

例如，第一个示例的热图方块位置创建如下：

.attr("x", function(d) { return hccol.indexOf(d.col) * cellSize; })
.attr("y", function(d) { return hcrow.indexOf(d.row) * cellSize; })

任何帮助将不胜感激，谢谢！！

Answer 1

而不是问...

what are hccol and hcrow in d3.js heatmaps?

...最好问：

what are hccol and hcrow in this particular code?

解释很简单：该代码的作者使用这两个数组在热图中定位矩形（以及标签）。

让我们看一个例子。在这个演示片段中，我创建了一个包含 100 个对象的数据数组。每个对象的行和列都有一个数字（0 到 9），以及一个值（我用来设置颜色），它只是这两个数字的乘积。

然后，在定位矩形时，我使用：

.attr("x", d => hccol.indexOf(d.col)*40)
.attr("y", d => hcrow.indexOf(d.row)*40)

使用这些变量：

var hccol = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var hcrow = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

因此，例如，如果 d.col 为 3，则相应的矩形将位于第四列（hccol 数组中 3 的索引，即第四个值）。

检查一下：

var data = [];

for(var i = 0; i < 10; i++){
 for(var j = 0; j < 10; j++){
  data.push({col: i, row: j, value: i*j})
 }
}

var svg = d3.select("body")
 .append("svg")
 .attr("width", 400)
 .attr("height", 400);
 
var hccol = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var hcrow = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

var color = d3.scaleLinear()
 .domain([0, 81])
 .range(["white", "red"]);
 
var rects = svg.selectAll("foo")
 .data(data)
 .enter()
 .append("rect")
 .attr("width", 40)
 .attr("height", 40)
 .attr("stroke", "gray")
 .attr("x", d=>hccol.indexOf(d.col)*40)
 .attr("y", d=>hcrow.indexOf(d.row)*40)
 .attr("fill", d=>color(d.value));

<script src="https://d3js.org/d3.v4.min.js"></script>

您可以看到单元格是根据它们的值定位的。随着 hccol 和 hcrow 都从 0 增长到 9，你有一个漂亮的对称热图。

现在，在第二个片段中，让我们弄乱 hccol 和 hcrow:

var hccol = [4, 1, 9, 3, 5, 6, 2, 8, 0, 7];
var hcrow = [0, 8, 7, 5, 2, 1, 4, 3, 9, 6];

查看结果：

var data = [];

for(var i = 0; i < 10; i++){
 for(var j = 0; j < 10; j++){
  data.push({col: i, row: j, value: i*j})
 }
}

var svg = d3.select("body")
 .append("svg")
 .attr("width", 400)
 .attr("height", 400);
 
var hccol = [4, 1, 9, 3, 5, 6, 2, 8, 0, 7];
var hcrow = [0, 8, 7, 5, 2, 1, 4, 3, 9, 6];

var color = d3.scaleLinear()
 .domain([0, 81])
 .range(["white", "red"]);
 
var rects = svg.selectAll("foo")
 .data(data)
 .enter()
 .append("rect")
 .attr("width", 40)
 .attr("height", 40)
 .attr("stroke", "gray")
 .attr("x", d=>hccol.indexOf(d.col)*40)
 .attr("y", d=>hcrow.indexOf(d.row)*40)
 .attr("fill", d=>color(d.value));

<script src="https://d3js.org/d3.v4.min.js"></script>

d3.js 热图中的 hccol 和 hcrow 是什么？

What are hccol and hcrow in d3.js heatmaps?

javascript

heatmap

d3.js