你好我的StackOverflow好友:使用D3.js解析时间序列数据
现在是时候寻求帮助。我一直在研究D3.js几周,刚开始觉得我理解了它的10%(ha,ha,ha)。我正在尝试生成一个非常简单的线图。只要数据非常简单,我就可以做到这一点,但是我的原始数据源包含UTC时间戳,以及实际/十进制数字,这些数据不会使崩溃超出简单范围。
的原始数据来源是这样的:
{ "Links": {}, "Items": [ { "Timestamp": "2016-07-12T22:21:10Z", "Value": 1055.6793212890625, "UnitsAbbreviation": "m3/h", "Good": true, "Questionable": false, "Substituted": false }, { "Timestamp": "2016-07-12T22:39:10Z", "Value": 989.00830078125, "UnitsAbbreviation": "m3/h", "Good": true, "Questionable": false, "Substituted": false } ], "UnitsAbbreviation": "m3/h" }
使用jQuery和JavaScript的时间格式功能,我能够组装以下简化数据集:
var dataset = [ {'theTime': '2016/07/12 15:58:40', 'theValue': 1123.07275390625}, {'theTime': '2016/07/12 16:21:10', 'theValue': 1055.6793212890625}, {'theTime': '2016/07/12 16:45:40', 'theValue': 962.4850463867188}, {'theTime': '2016/07/12 17:14:40', 'theValue': 831.2259521484375}, {'theTime': '2016/07/12 17:55:10', 'theValue': 625.3046875} ];
这里是我的代码:
//~ Populate the 'dataset': var dataset = []; $.get(url, function(data){ var itemCount = data.Items.length; var commaCount = itemCount - 1; for(i=0; i < itemCount; i++){ if(i == commaCount){ dataset.push("{'theTime': '" + formattedDateTime(data.Items[i].Timestamp) + "', 'theValue': " + data.Items[i].Value + "}"); } else { dataset.push("{'theTime': '" + formattedDateTime(data.Items[i].Timestamp) + "', 'theValue': " + data.Items[i].Value + "},"); } } var margin = {top: 20, right: 20, bottom: 30, left: 50}; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d.theTime); }) .y(function(d) { return y(d.theValue); }); var svg = d3.select("#myChart").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 + ")"); dataset.forEach(function(d) { d.theTime = parseDate(d.theTime); d.theValue = +d.theValue; }); x.domain(d3.extent(data, function(d) { return d.theTime; })); y.domain(d3.extent(data, function(d) { return d.theValue;})); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("return time(ms)"); svg.append("path") .datum(dataset) .attr("class", "line") .attr("d", line); }); //~~~ Format The Date: function formattedDateTime(dateAndTime) { var d = new Date(dateAndTime); var numDate = d.getDate(); var numMonth = d.getMonth() + 1; var numYear = d.getFullYear(); var numHours = d.getHours(); var numMinutes = d.getMinutes(); var numSeconds = d.getSeconds(); numDate = (numDate < 10) ? "0" + numDate : numDate; numMonth = (numMonth < 10) ? "0" + numMonth : numMonth; numHours = (numHours < 10) ? "0" + numHours : numHours; numMinutes = (numMinutes < 10) ? "0" + numMinutes : numMinutes; numSeconds = (numSeconds < 10) ? "0" + numSeconds : numSeconds; return numYear + "/" + numMonth + "/" + numDate + " " + numHours + ":" + numMinutes + ":" + numSeconds; };
第一个错误发生在'dataset.forEach()'函数中,wh ich是“Uncaught TypeError: Cannot read property 'length' of undefined
”。我在那里解析数据源于代码中'svg.append(“path”)'点出现的另一个错误,即“Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…
”。
Uggghhhh! (:-C)。如果观众中有任何D3.js导师,请帮助我确定我做错了什么以及如何解决问题。 ¡Muchas Gracias!
// =============附01 ========================
我得到它的工作! Yeee Haaaw!
我会在下面发布修改后的工作代码。但是对于这篇文章后面的任何人,我想解释一下,我发现了什么。
标记在链接的帖子(Alternatives for using forEeach() loop while converting data for D3.js)建议更改dataset.push()以删除所有引号。这给了我对象而不是字符串。经过一些故障排除后,它终于按预期显示(完全令人心动!),并且感谢Mark,你的建议确实有效。
下面是修改后的代码:
//~ Populate the 'dataset': var dataset = []; $.get(url, function(data){ var itemCount = data.Items.length; var commaCount = itemCount - 1; for(i=0; i<itemCount; i++){ dataset.push({theTime: formattedDateTime(data.Items[i].Timestamp), theValue: data.Items[i].Value}); } var margin = {top: 20, right: 20, bottom: 30, left: 50}; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y/%m/%d %H:%M:%S").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d.theTime); }) .y(function(d) { return y(d.theValue); }); var svg = d3.select("#myChart").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 + ")"); dataset.forEach(function(d) { d.theTime = parseDate(d.theTime); d.theValue = parseFloat(d.theValue); }); x.domain(d3.extent(dataset, function(d) { return d.theTime; })); y.domain(d3.extent(dataset, function(d) { return d.theValue;})); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("M³/hr"); svg.append("path") .datum(dataset) .attr("class", "line") .attr("d", line); }); //~~~ Format The Date: function formattedDateTime(dateAndTime) { var d = new Date(dateAndTime); var numDate = d.getDate(); var numMonth = d.getMonth() + 1; var numYear = d.getFullYear(); var numHours = d.getHours(); var numMinutes = d.getMinutes(); var numSeconds = d.getSeconds(); numDate = (numDate < 10) ? "0" + numDate : numDate; numMonth = (numMonth < 10) ? "0" + numMonth : numMonth; numHours = (numHours < 10) ? "0" + numHours : numHours; numMinutes = (numMinutes < 10) ? "0" + numMinutes : numMinutes; numSeconds = (numSeconds < 10) ? "0" + numSeconds : numSeconds; return numYear + "/" + numMonth + "/" + numDate + " " + numHours + ":" + numMinutes + ":" + numSeconds; };
嗨@WebFixItMan,你可以分享数据对象“dataSet”后执行for循环在 顶端。我相信这两个错误的主要原因来自'formattedDateTime'函数的输出。 – Alex
D3的哪个版本? –
嗨,亚历克斯和赫拉尔多! 我相信Cyril的回答回答Alex的问题。对于Gerardo,我正在使用CDN链接: \t'' – WebFixItMan