[英]Compare two time objects in D3.js
在D3.js中,我目前正在嘗試根據數據數組是否包含該時間來填充一個空數組(數組每5分鍾僅包含時間戳記一次)。 如果數據數組包含時間,則應復制值,否則為null。 但是,當我嘗試比較兩個時間對象時,它無法正常工作。
以下是代碼(當前代碼不是復制值,而是打印以簡化調試):
var data = [{"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
{"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
{"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.mytime = parseDate(d.mytime);
});
var act_data = [];
var x_extent = d3.extent(data, function(d){
return d['mytime']});
time_arr = d3.time.minute.range(x_extent[0],x_extent[1],5);
for(var key in time_arr){
var temp;
temp = contains(data,time_arr[key],'mytime');
}
function contains(data,value,variable)
{
var i =data.length;
while(i--){
if (data[i][variable] === value)
{
console.log('found');
return i;
}
}
return false;
}
輸出應為:
data = [{"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
{"mytime": "2015-12-01T23:50:00.000Z", "value": null},
{"mytime": "2015-12-01T23:55:00.000Z", "value": null},
{"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
{"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
];
您可以使用
d3.time.format
解析和格式化日期 d3.extent
確定時間戳的界限 d3.time.scale
生成要輸出的d3.time.scale
d3.map
散列您的輸入並確定是否存在值 這給了我們
var data = [...];
// for parsing and formatting
var timeformat = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
// range to operate on
var extent = d3.extent(data, function(d){
return timeformat.parse(d.mytime);
});
// scale representing the time stamps
var scale = d3.time.scale()
.domain(extent) // the boundaries
.ticks(d3.time.minute, 5); // 5 minutes intervals
// easier to determine if a value exists
var hashed = d3.map(data, function(d) { return d.mytime; });
// or if your version < 3.5
/*
var hashed = d3.map();
data.forEach(function(d) {
hashed.set(d.mytime, d);
});
*/
// transforms the scale into the desired output
var res = scale.map(function(t) {
var ft = timeformat(t);
return {
mytime: ft,
value: (hashed.has(ft)) ? hashed.get(ft).value : null
};
});
和一個演示http://jsfiddle.net/nikoshr/qxcLry8z/
var data = [ {"mytime": "2015-12-01T23:10:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:15:00.000Z", "value": 67}, {"mytime": "2015-12-01T23:20:00.000Z", "value": 70}, {"mytime": "2015-12-01T23:25:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:30:00.000Z", "value": 72}, {"mytime": "2015-12-01T23:35:00.000Z", "value": 75}, {"mytime": "2015-12-01T23:40:00.000Z", "value": 71}, {"mytime": "2015-12-01T23:45:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:00:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:05:00.000Z", "value": 85} ]; var timeformat = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ"); var extent = d3.extent(data, function(d){ return timeformat.parse(d.mytime); }); var scale = d3.time.scale() .domain(extent) .ticks(d3.time.minute, 5); var hashed = d3.map(); data.forEach(function(d) { hashed.set(d.mytime, d); }); var res = scale.map(function(t) { var ft = timeformat(t); return { mytime: ft, value: (hashed.has(ft)) ? hashed.get(ft).value : null }; }); var $table = $('<table></table>'); res.forEach(function(d) { $table.append('<tr><td>'+d.mytime+'</td><td>'+d.value+'</td></tr>') }); $('body').append($table);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
您可以這樣做:
var extent = d3.extent(data, function(d){ return d.mydate});//get the max min limit
var data1 = []; make an empty array
for (var i =0; i < data.length -1; i++){
var diff = data[i + 1].mytime.getTime() - data[i].mytime.getTime();
if (diff <= 300000){ //less than equal to 5 minutes
data1.push(data[i])
} else { //greater than 5 minutes
var t1 = new Date(data[i].mytime.getTime() + 300000)
var t2 = new Date(data[i +1].mytime.getTime() - 300000)
data1.push({"mytime": t1, "value": null})
data1.push({"mytime": t2, "value": null})
}
}
data1.push(data[data.length -1]); //take the last value as it was not processed
data = data1
這里的工作代碼
隨着ES6的出現,有更多的選項可以解決該任務。 根據需要支持的瀏覽器版本,以下代碼可能是可行的方法。 我已經在Chrome 49和FF 45上成功測試了此功能。
該解決方案將自定義生成器函數添加到data
數組,該函數將返回符合新迭代協議的Generator
對象。 這將遍歷data
數組,並使用其value
屬性設置為null
對象填充它檢測到的所有間隙。
該代碼段還利用了散布運算符來創建一個新數組,並通過隱式調用迭代器來填充它。
data[Symbol.iterator] = function*() {
var i = 0,
t = this[0],
nextStep;
while (i < this.length) {
nextStep = t.mytime.getTime() + FIVE_MINUTES_IN_MS;
yield t = nextStep < this[i].mytime.getTime()
? {"mytime": new Date(nextStep), "value": null}
: this[i++];
}
};
// use the spread operator to create a new array which will implicitly call
// the iterator
data = [...data];
請查看以下在Chrome 49和FF 45中運行的演示的摘要:
"use strict"; /////////////////////////////////////////////////////////////////////////// // Setup /////////////////////////////////////////////////////////////////////////// const FIVE_MINUTES_IN_MS = 5 * 60 * 1000; var data = [ {"mytime": "2015-12-01T23:10:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:15:00.000Z", "value": 67}, {"mytime": "2015-12-01T23:20:00.000Z", "value": 70}, {"mytime": "2015-12-01T23:25:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:30:00.000Z", "value": 72}, {"mytime": "2015-12-01T23:35:00.000Z", "value": 75}, {"mytime": "2015-12-01T23:40:00.000Z", "value": 71}, {"mytime": "2015-12-01T23:45:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:00:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:05:00.000Z", "value": 85} ]; var parse = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; data.forEach(function(d) { d.mytime = parse(d.mytime); }); /////////////////////////////////////////////////////////////////////////// // Implement iterator to fill in gaps in data array /////////////////////////////////////////////////////////////////////////// data[Symbol.iterator] = function*() { var i = 0, t = this[0], nextStep; while (i < this.length) { nextStep = t.mytime.getTime() + FIVE_MINUTES_IN_MS; yield t = nextStep < this[i].mytime.getTime() ? {"mytime": new Date(nextStep), "value": null} : this[i++]; } }; // use the spread operator to create a new array which will implicitly call the iterator data = [...data]; /////////////////////////////////////////////////////////////////////////// // Just output below. /////////////////////////////////////////////////////////////////////////// //console.dir(data); d3.select("body").append("div") .style({ "font-family": "monospace", "white-space": "pre" }) .text(JSON.stringify(data, null, 2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
或者,您可以提供迭代器協議的顯式實現。 這寫起來有些冗長,但不會改變整體概念:
data[Symbol.iterator] = function() {
var self = this;
return {
i: 0,
t: self[0],
next() {
if (this.i < self.length) {
var nextStep = this.t.mytime.getTime() + FIVE_MINUTES_IN_MS;
this.t = nextStep < self[this.i].mytime.getTime()
? { "mytime": new Date(nextStep), "value": null }
: self[this.i++];
return {
value: this.t,
done: false
}
} else {
return {
done: true
}
}
}
}
};
以下代碼段演示了這一點:
"use strict"; /////////////////////////////////////////////////////////////////////////// // Setup /////////////////////////////////////////////////////////////////////////// const FIVE_MINUTES_IN_MS = 5 * 60 * 1000; var data = [ {"mytime": "2015-12-01T23:10:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:15:00.000Z", "value": 67}, {"mytime": "2015-12-01T23:20:00.000Z", "value": 70}, {"mytime": "2015-12-01T23:25:00.000Z", "value": 64}, {"mytime": "2015-12-01T23:30:00.000Z", "value": 72}, {"mytime": "2015-12-01T23:35:00.000Z", "value": 75}, {"mytime": "2015-12-01T23:40:00.000Z", "value": 71}, {"mytime": "2015-12-01T23:45:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:00:00.000Z", "value": 80}, {"mytime": "2015-12-02T00:05:00.000Z", "value": 85} ]; var parse = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse; data.forEach(function(d) { d.mytime = parse(d.mytime); }); /////////////////////////////////////////////////////////////////////////// // Implement iterator to fill in gaps in data array /////////////////////////////////////////////////////////////////////////// data[Symbol.iterator] = function() { var self = this; return { i: 0, t: self[0], next() { if (this.i < self.length) { var nextStep = this.t.mytime.getTime() + FIVE_MINUTES_IN_MS; this.t = nextStep < self[this.i].mytime.getTime() ? { "mytime": new Date(nextStep), "value": null } : self[this.i++]; return { value: this.t, done: false } } else { return { done: true } } } } }; // use the spread operator to create a new array which will implicitly call the iterator data = [...data]; /////////////////////////////////////////////////////////////////////////// // Just output below. /////////////////////////////////////////////////////////////////////////// //console.dir(data); d3.select("body").append("div") .style({ "font-family": "monospace", "white-space": "pre" }) .text(JSON.stringify(data, null, 2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.