修复

Question

我正在尝试使用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>);
            }
        }

    }

我收到错误属性d：预期号码，“MNaN，NaNLNaN，NaNL ......”

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

任何人都可以帮我解决这个问题吗？

Answer 1

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

来自您的数据{ x: 180, y: 2017-06-08}, y的值2017-06-08不是有效的文字。也许你的意思是 string "2017-06-08"。

MNaN，NaNLNaN，NaNL ...

执行无效算术时会出现NaN，例如

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

修复

在进行数字运算时将日期解析为数字。

属性d：预期的数字，“MNaN，NaNLNaN，NaNL ......”。与d3反应

1 个答案:

修复