Javascript 使用嵌套json数据的d3热图:如何创建网格
这里参考这个例子: 我想创建一个52行7列的热图。52行表示一年中的52周,7列表示一周中的7天 使用这样的数据集:(在下面发布缩写版本)。 “天”表示一周中的7天,其中的数字表示一天内的活动数量。“总数”表示一周内活动的总数。“周”似乎是某种时间戳 但是,我很难弄清楚如何创建网格,因为示例数据集使用d.day和d.hour创建网格,分别使用7个值和24个值。具体来说,我应该如何处理days数组 我也不确定如何处理json值,比如,我应该如何定义变量来处理这个数据集Javascript 使用嵌套json数据的d3热图:如何创建网格,javascript,json,d3.js,Javascript,Json,D3.js,这里参考这个例子: 我想创建一个52行7列的热图。52行表示一年中的52周,7列表示一周中的7天 使用这样的数据集:(在下面发布缩写版本)。 “天”表示一周中的7天,其中的数字表示一天内的活动数量。“总数”表示一周内活动的总数。“周”似乎是某种时间戳 但是,我很难弄清楚如何创建网格,因为示例数据集使用d.day和d.hour创建网格,分别使用7个值和24个值。具体来说,我应该如何处理days数组 我也不确定如何处理json值,比如,我应该如何定义变量来处理这个数据集 [ { “天”:[ 0,
[
{
“天”:[
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;}
谢谢您的建议!:)