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

Question

我对 d3 还很陌生，但正试图从 this 示例中制作热图。但是，我只是不明白hcrow 和hccol 的含义。我用谷歌搜索了一下，发现this 更短的例子是hcrow 和hccol。这些是什么意思？它们如何影响热图？

第一个例子中的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

而不是问...

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

...最好问一下：

此特定代码中的hccol 和hcrow 是什么？

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

让我们看一个例子。在这个演示 sn-p 中，我正在创建一个包含 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，您就有了一个漂亮、对称的热图。

现在，在第二个 sn-p 中，让我们来看看 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>