属性d:预期数字"MNaN，NaNLNaN，NaNL…".与d3反应 [英] attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". react with d3

问题描述

我正在尝试使用react，typescript创建一个基本的d3条形图，并在数据中添加日期.我完全不熟悉d3和打字稿.

I am trying to create a basic d3 bar chart with dates in the data using react,typescript. I am completely new to d3 and typescript.

这是我的数据

[ { 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返回此数据

I am returning this data from 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 ..."

I am getting the error attribute d: Expected number, "MNaN,NaNLNaN,NaNL…"

如果我使用数字而不是日期，那么它可以正常工作.

if i use a number instead of date it is working properly.

有人可以帮我解决这个问题吗?

Can any one help me to fix this?

推荐答案

如果我使用数字而不是日期，那么它可以正常工作.

if i use a number instead of date it is working properly.

从您的数据中 {x:180，y:2017-06-08}， y 的值，即 2017-06-08 不是有效的文字.也许您是说 string "2017-06-08" .

From your data { x: 180, y: 2017-06-08}, The value of y i.e. 2017-06-08 is not a valid literal. Perhaps you meant string "2017-06-08".

MNaN，NaNLNaN，NaNL ...

MNaN,NaNLNaN,NaNL…

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

NaNs appear when you do invalid arithmetic e.g.

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

修复

在执行数字算术时，将日期解析为数字.

Fix

Parse the date into a number when doing Number arithmetic.

这篇关于属性d:预期数字"MNaN，NaNLNaN，NaNL…".与d3反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！