Javascript 使用嵌套json数据的d3热图：如何创建网格

这里参考这个例子：

我想创建一个52行7列的热图。52行表示一年中的52周，7列表示一周中的7天

使用这样的数据集：（在下面发布缩写版本）。 “天”表示一周中的7天，其中的数字表示一天内的活动数量。“总数”表示一周内活动的总数。“周”似乎是某种时间戳

但是，我很难弄清楚如何创建网格，因为示例数据集使用d.day和d.hour创建网格，分别使用7个值和24个值。具体来说，我应该如何处理days数组

我也不确定如何处理json值，比如，我应该如何定义变量来处理这个数据集

[
{
“天”：[
0,
0,
0,
0,
0,
1.
0
],
“总数”：1，
“一周”：1457827200
},
{
“天”：[
0,
0,
0,
1.
0,
3.
1.
],
“总数”：5，
“一周”：1458432000
},
{
“天”：[
1.
0,
0,
1.
5.
0,
1.
],
“总数”：8，
“一周”：1459036800
},
{
“天”：[
0,
0,
0,
2.
0,
1.
1.
],
“总数”：4，
“一周”：1459641600
},
{
“天”：[
0,
1.
3.
0,
2.
0,
0
],
“总数”：6，
“一周”：1460246400
},
{
“天”：[
0,
1.
1.
2.
2.
0,
0
],
“总数”：6，
“一周”：1460851200
},
{
“天”：[
1.
0,
3.
0,
2.
1.
0
],
“总数”：7，
“一周”：1461456000
},
{
“天”：[
0,
0,
0,
0,
0,
0,
0
],
“总计”：0，
“一周”：1462060800
}
]

使用嵌套数据，您可以首先为每个对象添加组元素，以在网格中每周创建一行，该行根据索引获取y坐标

然后，对于每一行，根据对象中的days数组追加rects

诀窍是执行两个data（）联接，第二个联接从已联接的数据中访问days数组

例如：

let数据=[
{
“天”：[
0,
0,
0,
0,
0,
1.
0
],
“总数”：1，
“一周”：1457827200
},
{
“天”：[
0,
0,
0,
1.
0,
3.
1.
],
“总数”：5，
“一周”：1458432000
},
{
“天”：[
1.
0,
0,
1.
5.
0,
1.
],
“总数”：8，
“一周”：1459036800
},
{
“天”：[
0,
0,
0,
2.
0,
1.
1.
],
“总数”：4，
“一周”：1459641600
},
{
“天”：[
0,
1.
3.
0,
2.
0,
0
],
“总数”：6，
“一周”：1460246400
},
{
“天”：[
0,
1.
1.
2.
2.
0,
0
],
“总数”：6，
“一周”：1460851200
},
{
“天”：[
1.
0,
3.
0,
2.
1.
0
],
“总数”：7，
“一周”：1461456000
},
{
“天”：[
0,
0,
0,
0,
0,
0,
0
],
“总计”：0，
“一周”：1462060800
}
]
设gridSize=20；
让宽度=（网格大小+1）*7；
设高度=（gridSize+1）*data.length；
//定义范围！！！
var x=d3.scaleLinear（）
.domain（[0,7]）
.范围（[0，宽度]）；
//52周
变量y=d3.scaleLinear（）
.domain（[0，data.length]）
.rangeRound（[高度，0]）；
让svg=d3.选择（“body”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
//为每个json对象生成行
var rows=svg.selectAll（“.row”）
.数据（数据）
.输入（）
.append（'g'）
.attr（“变换”，函数（d，i）{
返回“translate（0，+y（i）+）”
})
//为每个对象的天数数组生成矩形
let box=行。选择全部（“rect”）
.data（函数（d）{return d.days}）
.输入（）
.append（“rect”）
.attr（“x”，函数（d，i）{返回x（i）；}）
.attr（“宽度”，网格大小）
.attr（“高度”，网格大小）
.style（“填充”、“黑色”）
.attr（“类”、“带边框”）

正文{边距：0；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；}
谢谢您的建议！：）