Javascript d3.js scaleTime返回未定义

Javascript d3.js scaleTime返回未定义,javascript,asp.net,d3.js,Javascript,Asp.net,D3.js,我正试图使用d3.js来显示一个使用json对象(字符串)的图形,该对象是从aspx网页的代码背后的服务器中提取的。过去几天我一直在排除故障,遇到了麻烦 我得到: d3.v5.min.js:2错误:属性d:预期数字,“MNaN,189.61165048…”。 当我记录dttm和xScale dttm时,我得到了以下结果(这只是一个示例,而不是整个结果): dttm:2019-07-29 23:59:53 xScale:未定义 所以我很清楚,当我在line函数中调用xScale(d.dttm)

我正试图使用d3.js来显示一个使用json对象(字符串)的图形,该对象是从aspx网页的代码背后的服务器中提取的。过去几天我一直在排除故障,遇到了麻烦

我得到:

d3.v5.min.js:2错误:属性d:预期数字,“MNaN,189.61165048…”。
当我记录dttm和xScale dttm时,我得到了以下结果(这只是一个示例,而不是整个结果):

dttm:2019-07-29 23:59:53 xScale:未定义
所以我很清楚,当我在line函数中调用xScale(d.dttm)时,它返回null,这可以解释我遇到的问题

我将非常感谢任何关于如何纠正此错误的帮助

var jsonObject = <%=json%>;

var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%SZ");
var formatTime = d3.timeFormat("%Y-%m-%d %H:%M:%S");

jsonObject.forEach(function (d) {
            d.dttm = formatTime(parseTime(d.dttm));
            d.perc = +d.perc;
 });

var dataNest = d3.nest()
            .key(function (d) { return d.server_name; })
            .entries(jsonObject);

var margin = { top: 30, right: 20, bottom: 30, left: 50 },
            width = 600 - margin.left - margin.right,
            height = 270 - margin.top - margin.bottom;

var xScale = d3.scaleTime()
            .domain(d3.extent(jsonObject, function (d) { return d.dttm; }))
            .range([0, width]);

var yScale = d3.scaleLinear()
            .domain([0, 103])
            .range([height, 0]);

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisBottom().scale(xScale).ticks(5);
var yAxis = d3.axisLeft().scale(yScale).ticks(5);

var line = d3.line()
            .x(function (d) {
                console.log("dttm: " + d.dttm + " xScale: " + xScale(d.dttm));
                return xScale(d.dttm);
            })
            .y(function (d) { return yScale(d.perc); });

var svg = d3.select("#dataviz")
            .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 + ")");

d3.data = jsonObject;

dataNest.forEach(function (d, i) {
            console.log("index: " + i + " server: " + d.key + " color: " + colorScale(i) + " the object is below...");
            console.log(d);
            svg.append("path")
                .attr("class", "line")
                .attr("d", line(d.values))
                .style("stroke", colorScale(i))
        });
返回(仅几个示例,数据集非常大:

2019年7月29日星期一23:58:43 GMT-0600(山地昼时)
2019年7月29日星期一23:58:46 GMT-0600(山地昼时)
2019年7月29日星期一23:58:48 GMT-0600(山地昼时)
2019年7月29日星期一23:59:08 GMT-0600(山地昼间)
返回(仅一个示例,数据集很大):

以下是jsonObject的JSON.stringify

[{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:03","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:04","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:06","perc":18},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:09","perc":10},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:13","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:14","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:16","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:19","perc":9},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:23","perc":13},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:24","perc":4},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:26","perc":2},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:29","perc":6},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:33","perc":14},

由于我没有访问您的数据集的权限,我无法真正测试这一点,但是-我认为问题在于datetime解析。formatTime返回一个字符串,这不是scaleTime函数创建x-scale所需的字符串(它需要日期-时间格式转换为x-scale)。您需要从代码中去掉这一部分

jsonObject.forEach(function (d) {
            d.dttm = parseTime(d.dttm);
            d.perc = +d.perc;
 });

你能在jsonObject.forEach之后将数据记录到console.log中吗?当你解析时间时,有时候解析会有问题。而且你只能解析一次,所以如果该函数以某种方式运行了多次,它会把XScale搞得一团糟-只是用几个console.log()的结果编辑了我的文章帮帮忙。为耽搁向您道歉。这就成功了-谢谢您-我真的很感谢您在这里的帮助Cathy!另外,为了预防措施,在调用xScale等时,我使用了。
javascript new Date(d.dttm)
[{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:03","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:04","perc":3},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:06","perc":18},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:09","perc":10},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:13","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:14","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:16","perc":5},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:19","perc":9},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:23","perc":13},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:24","perc":4},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:26","perc":2},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:29","perc":6},{"server_name":"XXXXXXX","dttm":"2019-07-29 00:00:33","perc":14},
jsonObject.forEach(function (d) {
            d.dttm = parseTime(d.dttm);
            d.perc = +d.perc;
 });