.net 属性d：预期的数字；MNaN、NaNLNaN、NaNL和x2026&引用；。与d3反应

我正在尝试使用react、typescript创建一个基本的d3条形图，其中包含数据中的日期。我完全不熟悉d3和打字脚本

这是我的数据

[ { x: 180, y: 2017-06-08},
{ x: 250, y: 2017-06-09},
{ x: 150, y: 2017-06-10},
{ x: 496, y: 2017-06-11},
{ x: 140, y: 2017-06-12},
{ x: 380, y: 2017-06-13},
{ x: 100, y: 2017-06-14},
{ x: 150, y: 2017-06-15}]

我正在从api返回此数据

并使用此代码生成图表

     public render(): JSX.Element {

            let ldata = this.getState().loadedData;

            if (ldata != null) {


                let margin = { top: 5, right: 50, bottom: 20, left: 50 },
                    w = 800 - (margin.left + margin.right),
                    h = 300 - (margin.top + margin.bottom);

                let transform = 'translate(' + margin.left + ',' + margin.top + ')';

                let x = d3.scaleTime()
                    .domain(d3.extent(ldata, function (d: any) { return d.x })).rangeRound([0, w]);

                let y = d3.scaleTime()
                    .domain([0, d3.max(ldata, function (d: any) { return d.y + 100; })]).range([h, 0]);

                let line: any = d3.line().x(function (d: any) { return x(d.x); }).y(function (d: any) { return x(d.y); });

                let d = line(ldata);
                return (
                    <div className="container body-content">
                        <div className="ms-Grid">
                            <div className="ms-Grid-row">

                                <div className="ms-Grid-col ms-u-lg6">
                                    <h3 className="ms-font-xl">CIA</h3>
                                    <table className="ms-font-m table table-bordered table-striped" style={{ marginBottom: "0px" }}>
                                        <thead className="thead-vsts">
                                            <tr>
                                                <th>Column1</th>
                                                <th>Column2</th>
                                                <th>Column3</th>
                                                <th>Column4</th>
                                                <th>Graph</th>
                                            </tr>
                                        </thead>
                                        <tbody><tr>
                                            <td>Value 1</td>
                                            <td>Value 2</td>
                                            <td>Value 3</td>
                                            <td>Value 4</td>
                                            <td>   <svg width="800" height="300">
                                                <g transform={transform}>
                                                    <path className="line shadow" d={d} style={{ stroke: "red" }} />
                                                </g>
                                            </svg></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>);
            }
        }

    }

public render（）：JSX.Element{
让ldata=this.getState（）.loadedData；
如果（ldata！=null）{
设边距={top:5，right:50，bottom:20，left:50}，
w=800-（左边距+右边距），
h=300-（页边距.顶部+页边距.底部）；
让transform='translate（'+margin.left+'，'+margin.top+'）；
设x=d3.scaleTime（）
.domain（d3.extent（ldata，函数（d:any）{return d.x}））.rangeRound（[0，w]）；
设y=d3.scaleTime（）
.domain（[0，d3.max（ldata，函数（d:any）{return d.y+100；}）]）.range（[h，0]）；
设line:any=d3.line（）.x（函数（d:any）{return x（d.x）；}）.y（函数（d:any）{return x（d.y）；}）；
设d=直线（ldata）；
返回(
中情局
专栏1
专栏2
第3栏
专栏4
图表
值1
价值2
价值3
价值4
);
}
}
}

我得到了错误属性d：预期的数字，“MNaN，NaNLNaN，NaNL…”

如果我使用数字而不是日期，它工作正常

有人能帮我修一下吗

如果我使用数字而不是日期，它工作正常

从您的数据

{x:180，y:2017-06-08}，

的

y

值，即

2017-06-08

不是有效的文本。也许你的意思是字符串

“2017-06-08”

南，南，南

当您执行无效的算术运算时，会出现“N”

console.log("2017-06-08" - 4); // NaN

修理 在进行数字运算时，将日期解析为数字