D3 无需显式存储行和列的热力图

Question

我有一个2D数据数组，想用D3将其可视化为热图。

从我看到的例子中（包括：https://dev59.com/TWcs5IYBdhLWcg3wWCpB#12925448 和 http://bl.ocks.org/2605010），看起来您需要将每个数据元素的行和列编码为属性。是否有一种方法可以利用数据的结构（即它是一个可通过[i][j]符号索引的二维数组）来避免冗余地编码位置信息？

如果没有，是否有一种简洁和/或高效的方法生成编码位置信息的数据结构？我的意思是除了嵌套for循环之外的其他方法：

myData = [[1, 2], [3, 4]]
myDataWithPos = []

nRow = myData.length
nCol = myData[0].length

for (i = 0; i < nRow; i++){
    for(j = 0; j < nCol; j++){
        myDataWithPos.push({val: myData[i][j], row: i, col: j})
    }
}

- DMack

Answer 1

当然，您可以使用二维数组的索引来绘制热图。我在http://jsfiddle.net/uArga/4/上提供了一个快速示例。

假设您的数据看起来像这样：

var data = [[3,5],[9,2]];

首先，我设置了一些基本的比例尺来计算基于数据大小和图表大小的x和y偏移量。这样就可以通过更改height和width来轻松调整图表的大小，而不必手动重新计算每个单元格的大小。

var x = d3.scale.linear()
    .range([0, width])
    .domain([0,data[0].length]);

var y = d3.scale.linear()
    .range([0, height])
    .domain([0,data.length]);

您可以将每一行添加到热力图中。

var row = svg.selectAll(".row")
             .data(data)
           .enter().append("svg:g")
             .attr("class", "row");

然后使用子查询将每个单元格添加到行中。可能有更简洁的方法来完成这个任务，但我基本上只是在每个单元格的数据旁边捕获了行号。然后使用比例来计算每个单元格的x、y、height和width。

var col = row.selectAll(".cell")
    .data(function (d,i) {return d.map(function(a){return {value: a, row: i};})})
  .enter().append("svg:rect")
    .attr("class", "cell")
    .attr("x", function(d, i) { return x(i); })
    .attr("y", function(d, i) { return y(d.row); })
    .attr("width", x(1))
    .attr("height", y(1))
    .style("fill", function(d) { return colorScale(d.value); });

- Bill