Question

我想用d3js构建一个'heatmap'（就像这里http://bl.ocks.org/tjdecke/5558084）。热图显示某些工作站（编码为X）观察到某些事件（编码为Y），并且在未观察到时必须包含灰色方块，在观察者时必须包含绿色方块。我知道如何执行绘图本身，但我需要将数据提供给d3js。

我有以下形式的数据，表明哪些电视台看到了事件。我总共说了20个活动和30个站。未列出事件的电台未列出。

  avail = [
{
    event: 1,
    stations: [1, 3, 4, 5, 6, 7]
},
{ event: 2,
    stations: [1, 2, 4, 5, 6, 7]
},
{ event: 3,
    stations: [1, 3, 4, 5, 6, 7]
},...

如何为d3js声明上述热图，如何处理给定格式的数据以显示热图？在事件3中，我希望灰色方块出现在列表中未提及的站点和站点中提到的站点的绿色方块：array。

请注意，我可以控制格式，但我喜欢这种格式，因为它非常紧凑和自然。

Answer 1

假设您将数据转换为矩阵，其中行是工作站，事件是列。 1表示已观察到事件，0表示没有观察到事件。您可以使用以下代码在热图中显示：

var data = [[matrix]];
var rows = svg.selectAll("g.row")
              .data(data).enter()
              .append("g")
              .attr("class", "row")
              .attr("transform", function(d, i) { return "translate(0," + i * 50 + ")"); });

rows.selectAll("rect")
    .data(function(d) { return d; }).enter()
    .append("rect")
    .attr("x", function(d, i) { return i * 50; })
    .attr("width", 50).attr("height", 50)
    .attr("fill", function(d) { return d == 0 ? "gray" : "green"; });

将复杂数据格式绘制为d3.js中的热图

1 个答案: