Question

我正在尝试使用d3.js来显示通过json对象（字符串）显示的图形，该对象是从aspx网页后面的代码中的服务器中拉出的。在过去的几天里，我一直在进行故障排除，并且遇到了麻烦。

我得到：

git prfetch upstream

当我记录dttm和xScale dttm时，我得到了（这只是一个示例，而不是整个结果）：

d3.v5.min.js:2 Error: <path> attribute d: Expected number, "MNaN,189.61165048…".

所以对我来说很清楚，当我在line函数中调用xScale（d.dttm）时，它返回的null可以解释我遇到的问题。

对于我如何进行纠正的任何帮助，将不胜感激！

dttm: 2019-07-29 23:59:53 xScale: undefined

编辑：这是Console.log（）的一些有用结果

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))
        });

返回（仅举几个例子，数据集非常大：

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

Mon Jul 29 2019 23:58:43 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:58:46 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:58:48 GMT-0600 (Mountain Daylight Time)
Mon Jul 29 2019 23:59:08 GMT-0600 (Mountain Daylight Time)

返回（只是一个样本，数据集很大）：https://imgur.com/flOGpsZ

这是jsonObject的JSON.stringify

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

        console.log(jsonObject);

Answer 1

由于我无权访问您的数据集，因此我无法真正进行测试，但是-我认为问题在于日期时间解析。 formatTime返回一个字符串，这不是scaleTime函数创建x缩放所需的字符串（它需要日期时间格式才能转换为x缩放）。您需要从代码中删除这一部分。

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

d3.js scaleTime返回未定义

1 个答案: