我是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; })
任何帮助将不胜感激，谢谢！
最佳答案
而不是问...
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为第四值）。核实：
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>关于javascript - d3.js热图中的hccol和hcrow是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42527905/