Tuesday, July 28, 2015

Error: Invalid value for attribute d="MNaN,82.5LNaN,41.25LNaN,0LNaN,123.75LNaN,330"

You might encounter the following error in D3.js:

Error: Invalid value for <path> attribute d="MNaN,82.5LNaN,41.25LNaN,0LNaN,123.75LNaN,330"

If you get the following date and time format:

"collectedTime" : "2015-05-19 14:48:40",

you need to parse it as follows:

        svg.x.domain(d3.extent(data, function (d) {
//            return d.collectedTime;
            var parsedTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse(d.collectedTime);
            return parsedTime;
        }));

        svg.line = d3.svg.line()
                .x(function (d) {
                    //return svg.x(d.timestamp);
                    //return svg.x(d.collectedTime);
                    var parsedTime = d3.time.format("%Y-%m-%d %H:%M:%S").parse(d.collectedTime);
                    return svg.x(parsedTime);
                })
                .y(function (d) {
                    return svg.y(valueFunction(d));
                });

References:
http://stackoverflow.com/questions/26070783/invalid-value-for-path-attribute
https://github.com/mbostock/d3/wiki/Time-Formatting

No comments:

Post a Comment