D3.js D3错误：<；路径>；属性d：预期的数字；MNaN、NaNLNaN、NaNL和x2026&引用；

我觉得问题在于订单日期格式

所有通过area函数的日志都可以工作，但它不会呈现，当我检查控制台时，我得到

错误：属性d：预期数字，“MNaN，NaNLNaN，NaNL…”

如果我注释掉

.attr（'d'，区域）

没有错误

这也在jsFiddle（）上

const rawData=[{
“机构id”：541，
“机构名称”：“门店1”，
“订单日期”：“2018-01-01T00:00:00.000Z”，
“门店名称”：“门店1”，
“门店标识”：1469，
"命令":三,，
“平均订单大小”：2，
“收入”：500
},
{
“机构id”：541，
“机构名称”：“门店2”，
“订单日期”：“2018-01-01T00:00:00.000Z”，
“门店名称”：“门店2”，
“门店标识”：1468，
"命令":二,，
“平均订单大小”：1，
“收入”：81
},
{
“机构id”：541，
“机构名称”：“商店3”，
“订单日期”：“2018-01-01T00:00:00.000Z”，
“门店名称”：“门店3”，
“门店id”：1404，
“命令”：14，
“平均订单大小”：1，
“收入”：1348.26
},
{
“机构id”：541，
“机构名称”：“商店4”，
“订单日期”：“2018-01-01T00:00:00.000Z”，
“门店名称”：“门店4”，
“门店id”：1517，
“命令”：41，
“平均订单大小”：1，
“收入”：8115.6
},
{
“机构id”：541，
“机构名称”：“门店1”，
“订单日期”：“2018-01-02T00:00:00.000Z”，
“门店名称”：“门店1”，
“门店标识”：1469，
“命令”：7，
“平均订单大小”：1，
“收入”：1522
},
{
“机构id”：541，
“机构名称”：“门店2”，
“订单日期”：“2018-01-02T00:00:00.000Z”，
“门店名称”：“门店2”，
“门店标识”：1468，
"命令":三,，
“平均订单大小”：2，
“收入”：297.5
},
{
“机构id”：541，
“机构名称”：“商店3”，
“订单日期”：“2018-01-02T00:00:00.000Z”，
“门店名称”：“门店3”，
“门店id”：1404，
“命令”：14，
“平均订单大小”：2，
“收入”：1515.76
},
{
“机构id”：541，
“机构名称”：“商店4”，
“订单日期”：“2018-01-02T00:00:00.000Z”，
“门店名称”：“门店4”，
“门店id”：1517，
“命令”：40，
“平均订单大小”：1，
“收入”：7288.8
}
];
/**
常量数据=[
{
“订单日期”：“2017-12-31”，
“Store1”：500，
“商店2”：81，
“Store3”：1348.26，
“存储4”：8115.6
},
{
“订单日期”：“2018-01-01”，
“Store1”：1522，
“存储2”：297.5，
“Store3”：1515.76，
“存储4”：7288.8
}
]
*/
const parseTime=d3.timeParse（“%Y-%m-%d”）；
常量formatTime=d3.timeFormat（“%Y-%m-%dT%H:%m:%S.%LZ”）；
常数p=d3.精度固定（'.01'）；
const formatNumber=d3.format（`.${p}f`）；
常量存储=原始数据
.map（d=>({
名称：d.商店名称，
id:d.store\u id
}))
.reduce（（acc，cur）=>acc.find（s=>s.id==cur.id）？acc:[…acc，cur]）；
const storeNames=stores.map（s=>s.name）
//这是将数据分组为对象，其中包含每个商店的日期和收入。此外，日期必须是js对象
const stackData=rawData
.map（d=>（{…d，
订单日期：格式时间（新日期（d.订单日期）），
收入：格式编号（d.收入）
}))
.减少（（acc，cur）=>{
let existing=acc.find（e=>e.order\u date===cur.order\u date）
如果（现有）{
现有[cur.store_name]=当前收入；
返回acc
}
返回[…acc{
订单日期：当前订单日期，
[当前商店名称]：当前收入
}]
}, []);
常量边距={
前50名，
右:30,，
底数：70，
左：50
};
常量宽度=960-margin.right-margin.left；
常数高度=600-margin.top-margin.bottom；
常量color=d3.scaleOrdinal（d3.schemePastel1）；
设g=d3。选择（“#堆叠区域”）
.append（'svg'）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）
设x=d3.scaleTime（）
.范围（[0，宽度]）
设y=d3.scaleLinear（）
.范围（[高度，0]）；
设xAxisCall=d3.axisBottom（）；
设yAxisCall=d3.axisLeft（）；
设xAxisGroup=g.append（'g'）
.attr（'class'，'x轴'）
.attr（'transform'，'translate（0，${height}）`）
设yAxisGroup=g.append（'g'）
.attr（'class'，'y轴'）
设stack=d3.stack（）
.key（stores.map（s=>s.name））
stack.order（d3.stackOrderNone）；
堆栈偏移（d3.stackOffsetNone）；
var area=d3.area（）
.x（功能（d）{
console.log（'X:'中的数据，d）
返回x（d.数据.订单日期）；
})
.y0（功能（d）{
console.log（'Y0中的数据：'，d）
返回y（d[0]）；
})
.y1（功能（d）{
console.log（'Y1中的数据：'，d）
返回y（d[1]）；
});
//console.log（'区域：'，区域）
//console.log（'StackData:'，StackData）
//log（'Stack:'，Stack（stackData））
//将需要获得最大y值*/
const maxY=stackData.map（d=>{
const vals=d3.keys（d）.map（k=>k！='order\u date'？d[k]：0）；
返回d3.总和（VAL）；
});
//对于任何缺少的数据，请添加0
const cleanData=stackData.map（d=>{
设existingStores=d3.keys（d）；
storeNames.forEach（n=>{
如果（！existingStores.includes（n））d[n]=0
})
返回d
});
//更新比例
x、 域（d3.extent（rawData.map（d=>newdate（d.order_Date）））；
//x.域（d3.范围（堆栈数据，函数（d））{
//返回订单日期；
// }));
y、 域（[0，maxY]）；
//更新轴
xAxisCall.scale（x）；
xAxisGroup.call（xAxisCall）
yAxisCall.量表（y）；
yAxisGroup.call（yAxisCall）；
log（'Data to stack:'，cleanData）；
常量图=g.selectAll（'.store'）
.数据（堆栈（清除数据））；
log（'CleanData:'，JSON.stringify（CleanData））
graph.enter（）.append（'g'）
.attr（'class'，d=>'store'）
.append（'路径'）
.attr（'class'，'area'）
.attr（'d'，区域）
//.style（'fill'，d=>颜色（d.key））
//.style（'fill-opacity'，0.5）
/*}*/

---

这是一个部分答案，因为我仍然无法将其显示出来，但能够摆脱NaN。我发现的问题是，你从来没有在很多地方调用订单日期的时间

var area = d3.area()
  .x(function(d) {
    console.log('Data in X: ', parseTime(d.data.order_date))
    return parseTime(d.data.order_date);
  })
  .y0(function(d) {
    console.log('Data in Y0: ', d[0])
    return d[0];
  })
  .y1(function(d) {
    console.log('Data in Y1: ', d[1])
    return d[1];
  });