2
你好我的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