Javascript 是否在此d3.js日历视图中包含json？

我不熟悉d3图表和javascript，这是一场艰苦的战斗

经过一系列研究，我能够用CSV文件填充图表。现在，我试图用

json

数据填充图表

这是我的密码。它松散地基于。但我更喜欢使用我的代码（即d3.v4）：

var-width=960，
高度=136，
细胞大小=17；
var color=d3.scaleQuantize（）
.域（[9000，12000]）
.范围（[“蓝色”、“红色”、“绿色”、“黄色”、“紫色”、“黑色”）；
var dateParse=d3.timeFormat（“%Y-%m-%d”）；
var svg=d3.选择（“主体”）
.selectAll（“svg”）
.数据（d3.范围（2017年、2018年））
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（+（（宽度-单元大小*53）/2）+）、“+（高度-单元大小*7-1）+”）；
svg.append（“文本”）
.attr（“变换”、“平移（-6，+cellSize*3.5+”）旋转（-90）”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d；
});
var rect=svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#ccc”）
.selectAll（“rect”）
.数据（功能（d）{
返回d3.timeDays（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“rect”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“x”，函数（d）{
返回d3.timeWeek.count（d3.timeYear（d），d）*单元大小；
})
.attr（“y”，函数（d）{
返回d.getDay（）*cellSize；
})
.基准（d3.时间格式（“%Y-%m-%d”）；
svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“千”）
.selectAll（“路径”）
.数据（功能（d）{
返回d3.时间月（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“路径”）
.attr（“d”，路径月）；
d3.json（“data3.json”），函数（错误，数据）{
//正在填充数据，因为我没有该文件
数据=[{
“日期”：“2017-01-04”，
“开放”：10430.69
}, {
“日期”：“2017-01-05”，
“开放”：10584.56
}];
data.forEach（函数（d）{
d、 dd=日期解析（新日期（d.Date））；
控制台日志（d.dd）；
});
var nest=d3.nest（）
.键（功能（d）{
返回d.dd；
})
.地图（数据）；
矩形过滤器（函数（d）{
返回数据中的d；
})
.attr（“填充”，功能（d）{
返回颜色（数据[d]）；
})
.附加（“标题”）
.文本（功能（d）{
返回d+“：”+数据[d]；
});
});
功能路径月（t0）{
变量t1=新日期（t0.getFullYear（），t0.getMonth（）+1,0），
d0=t0.getDay（），
w0=d3.时间周计数（d3.时间年（t0），t0），
d1=t1.getDay（），
w1=d3.时间周数（d3.时间年（t1），t1）；
返回“M”+（w0+1）*cellSize+”，“+d0*cellSize”+
“H”+w0*单元尺寸+V”+7*单元尺寸+
“H”+w1*单元尺寸+“V”+（d1+1）*单元尺寸+
“H”+（w1+1）*单元尺寸+“V”+0+
“H”+（w0+1）*单元大小+“Z”；
}

---

看起来您忘记了声明dateParse（并且使用错误）

var dateParse=d3.timeParse（“%Y-%m-%d”）


var-width=960，
高度=136，
细胞大小=17；
var color=d3.scaleQuantize（）
.域（[9000，12000]）
.范围（[“蓝色”、“红色”、“绿色”、“黄色”、“紫色”、“黑色”）；
var dateParse=d3.timeParse（“%Y-%m-%d”）；
var svg=d3.选择（“主体”）
.selectAll（“svg”）
.数据（d3.范围（2017年、2018年））
.enter（）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（+（（宽度-单元大小*53）/2）+）、“+（高度-单元大小*7-1）+”）；
svg.append（“文本”）
.attr（“变换”、“平移（-6，+cellSize*3.5+”）旋转（-90）”）
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，10）
.attr（“文本锚定”、“中间”）
.文本（功能（d）{
返回d；
});
var rect=svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“#ccc”）
.selectAll（“rect”）
.数据（功能（d）{
返回d3.timeDays（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“rect”）
.attr（“宽度”，单元格大小）
.attr（“高度”，单元格大小）
.attr（“x”，函数（d）{
返回d3.timeWeek.count（d3.timeYear（d），d）*单元大小；
})
.attr（“y”，函数（d）{
返回d.getDay（）*cellSize；
})
.基准（d3.时间格式（“%Y-%m-%d”）；
svg.append（“g”）
.attr（“填充”、“无”）
.attr（“笔划”，“千”）
.selectAll（“路径”）
.数据（功能（d）{
返回d3.时间月（新日期（d，0，1），新日期（d+1，0，1））；
})
.enter（）.append（“路径”）
.attr（“d”，路径月）；
d3.json（“data3.json”），函数（错误，数据）{
//正在填充数据，因为我没有该文件
数据=[{
“日期”：“2017-01-04”，
“开放”：10430.69
}, {
“日期”：“2017-01-05”，
“开放”：10584.56
}];
data.forEach（函数（d）{
d、 dd=日期解析（d.日期）；
控制台日志（d.dd）；
});
var nest=d3.nest（）
.键（功能（d）{
返回d.dd；
})
.地图（数据）；
矩形过滤器（函数（d）{
返回数据中的d；
})
.attr（“填充”，功能（d）{
返回颜色（数据[d]）；
})
.附加（“标题”）
.文本（功能（d）{
返回d+“：”+数据[d]；
});
});
功能路径月（t0）{
变量t1=新日期（t0.getFullYear（），t0.getMonth（）+1,0），
d0=t0.getDay（），
w0=d3.时间周计数（d3.时间年（t0），t0），
d1=t1.getDay（），
w1=d3.时间周数（d3.时间年（t1），t1）；
返回“M”+（w0+1）*cellSize+”，“+d0*cellSize”+
“H”+w0*单元尺寸+V”+7*单元尺寸+
“H”+w1*单元尺寸+“V”+（d1+1）*单元尺寸+
“H”+（w1+1）*单元尺寸+“V”+0+
“H”+（w0+1）*单元大小+“Z”；
}
要使代码正常工作，需要进行一些更改。这些主要与使用
数据
而不是
嵌套
有关，并且与d3 v3相比，d3 v4有一个小的变化（我找不到相关信息）

过滤器

首先，您没有正确过滤数据：

您不希望像这样进行筛选：

return d in data;

运算符中的

用于obje的属性
return d in nest;