Javascript 创建面积图：带NaN的路径

我从D3开始，试图从

我得到了这个错误

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…"

这是你的电话号码

更新1

我需要有数据的日期和价值和y。。。。。但我有约会和结束。。。。。还更新了JSFIDLE中的代码。 现在我得到了x轴和y轴，但错误信息保持不变

了解路径的d属性中的错误 当您在一条线（或区域）创建的路径中得到一个

NaN

时，您必须检查

NaN

在哪里。例如：

MNaN,NaNL...
  ↑   ↑
  x   y

这表明问题存在于

x

和

y

方法中。另一方面，当您得到：

MNaN,42L...
  ↑   ↑
  x   y

问题在于

x

方法，而

M42,NaNL...
  ↑   ↑
  x   y

。。。显示问题在

y

方法中。根据您更新的JSFIDLE，问题来自

x

方法

你的问题 问题是，您正在将这样的内容传递到时间刻度：

"2007-04-24"

这不是日期，这只是一个字符串。你必须解析日期。例如，给定字符串格式：

data.forEach(function(d){
    d.date = d3.timeParse("%Y-%m-%d")(d.date);
});

以下是更改后的代码：

数据=[{
“日期”：“2007-04-23”，
“结束”：93.24
},
{
“日期”：“2007-04-24”，
“收盘”：95.35
}
];
data.forEach（函数（d）{
d、 日期=d3.timeParse（“%Y-%m-%d”）（d.date）；
d、 值=d.close；
})
高度=500；
宽度=500；
保证金=({
前20名，
右:20,，
底数：30，
左：30
});
x=d3.scaleTime（）
.域（d3.范围（数据，d=>d.date））
.范围（[margin.left，width-margin.right]）
y=d3.scaleLinear（）
.domain（[0，d3.max（数据，d=>d.value）]）.nice（）
.范围（[高度-边距.底部，边距.顶部]）
xAxis=g=>g
.attr（“transform”，`translate（0，${height-margin.bottom}）`）
.call（d3.axisBottom（x）.ticks（width/80）.ticksizeout（0））；
yAxis=g=>g
.attr（“transform”，translate（${margin.left}，0）`）
.呼叫（d3.左（y））
.call（g=>g.select（“.domain”）.remove（）
.call（g=>g.select（“.tick:text类型的最后一个”）.clone（）
.attr（“x”，3）
.attr（“文本锚定”、“开始”）
.attr（“字体大小”、“粗体”）
.text（data.y））
面积=d3.面积（）
.x（d=>x（d.date））
.y0（y（0））
.y1（d=>y（d值））
const svg=d3.select（'svg'）
.attr（'width'，width）
.attr（'height'，height）
追加（“路径”）
.基准（数据）
.attr（“填充”、“钢蓝”）
.attr（“d”，区域）；
svg.append（“g”）
.呼叫（xAxis）；
svg.append（“g”）
.呼叫（yAxis）


data.forEach(function(d){
    d.date = d3.timeParse("%Y-%m-%d")(d.date);
});