Javascript d3.js简单线形图未捕获类型错误：无法读取属性'；长度'；空的

我正在基于本地JSON格式的数据制作一个简单的折线图。对于可视化，我必须将原始数据分组到新数据。分组有效，但不幸的是，我无法使用日期中的分组键。 我在浏览器上看到一个错误，上面写着

“未捕获的TypeError:无法读取null的属性“0”

并指向“d3.v3.min.js:1”，有人知道为什么会发生这种情况吗

dataset.js

var数据集=[{
“密钥”：“DEMO-537”，
“字段”：{
“摘要”：“测试1”，
“customfield_12504”：2，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}, {
“密钥”：“DEMO-536”，
“字段”：{
“摘要”：“测试2”，
“customfield_12504”：13，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}, {
“密钥”：“DEMO-535”，
“字段”：{
“摘要”：“演示3”，
“customfield_12504”：12，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}
},
{
“密钥”：“DEMO-526”，
“字段”：{
“摘要”：“测试4”，
“customfield_12504”：5，
“customfield_24000”：“2022-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}];
var newdata=[]；
dataset.forEach（问题=>{
密钥=问题[“密钥”]
到期=问题[“字段”][“自定义字段_24000”]
值=问题[“字段”][“自定义字段_12504”]
状态=问题[“字段”][“状态”][“名称”]
newdata.push({
钥匙：钥匙，
到期:到期,，
状态：状态，
价值：价值
});
});
console.log（newdata）；
//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%d-%b-%y”）.parse；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var valueline=d3.svg.line（）
.x（功能（d）{
返回x（d键）；
})
.y（功能（d）{
返回y（d值）；
});
//添加svg画布
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
var LineChart=svg.selectAll（“g”）
.数据（新数据）
.输入（）
.附加（“g”）；
newdata.forEach（问题=>{
key=parseDate（key）；
值=+值；
});
//缩放数据的范围
x、 域（d3.范围（新数据，函数（d））{
返回到期日；
}));
y、 域（[0，d3.max）（新数据，函数（d）{
返回d值；
})]);
//添加valueline路径。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，valueline（newdata））；
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
正文{
字体：12px Arial；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
行程：rgb（160151151）；
笔画宽度：1；
形状渲染：边缘清晰；
}
使用d3的更新版本，您的数据集js无效，更新为d3 v5语法绘制比例


var数据集=[{
“密钥”：“DEMO-537”，
“字段”：{
“摘要”：“测试1”，
“customfield_12504”：2，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}, {
“密钥”：“DEMO-536”，
“字段”：{
“摘要”：“测试2”，
“customfield_12504”：13，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}, {
“密钥”：“DEMO-535”，
“字段”：{
“摘要”：“演示3”，
“customfield_12504”：12，
“customfield_24000”：“2023-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}, {
“密钥”：“DEMO-526”，
“字段”：{
“摘要”：“测试4”，
“customfield_12504”：5，
“customfield_24000”：“2022-01-01”，
“地位”：{
“名称”：“最佳”
}
}
}];
var newdata=[]；
dataset.forEach（问题=>{
让key=issue.key；
let due=issue.fields.customfield_24000；
让值=issue.fields.customfield_12504；
让status=issue.fields.status.name；
newdata.push({
钥匙：钥匙，
到期:到期,，
状态：状态，
价值：价值
});
});
//console.log（newdata）；
//设置画布/图形的尺寸
让边距={
前30名，
右:20,，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//解析日期/时间
让parseDate=d3.timeFormat（“%d-%b-%y”）.parse；
//设定范围
设x=d3.scaleTime（）.range（[0，width]）；
设y=d3.scaleLinear（）.range（[height，0]）；
//定义轴
设xAxis=d3.axisBottom（x）.ticks（5）；
设yAxis=d3.axisLeft（y）.ticks（5）；
//界定界线
设valueline=d3.line（）
.x（功能（d）{
返回x（d键）；
})
.y（功能（d）{
返回y（d值）；
});
//添加svg画布
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
让LineChart=svg.selectAll（“g”）
.数据（新数据）
.输入（）
.附加（“g”）；
/*键和值未定义*/
newdata.forEach（问题=>{
key=d3.timeParse（issue.key）；
value=+issue.value；
});
//缩放数据的范围
x、 域（d3.范围（新数据，函数（d））{
返回到期日；
}));
Y