Question

我对d3很新，但是试图从this示例中制作热图。但是，我只是不明白hcrow和hccol表示什么。我用谷歌搜索了一下，发现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; })点的方法，对吗？但是拥有一个无序列表会有什么意义呢？

例如热图正方形＆＃39;第一个示例的位置创建如下：

$config

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

Answer 1

而不是问......

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

......最好问：

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

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

让我们看一个例子。在这个演示片段中，我创建了一个包含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，这是第四个值。）

检查：

＆＃13;

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));

＆＃13;

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

＆＃13;

您可以看到单元格根据其值定位。当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];

查看结果：

＆＃13;

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));

＆＃13;

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

＆＃13;

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

1 个答案: