比较D3.js两个时间对象 [英] Compare two time objects in D3.js
本文介绍了比较D3.js两个时间对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在D3.js我目前正在基于数据数组来填充一个空数组（数组包含每5分钟后只时间戳）中包含的时间或没有。如果数据数组包含的时候，它应该复制的价值，否则无效。但是，当我试图比较两个对象时其工作不正常。
以下是code（当前code未复制值，但印刷使调试容易）：
VAR数据= [{数值指明MyTime：2015-12-01T23：10：00.000Z，价值：64}，
{数值指明MyTime：2015-12-01T23：15：00.000Z，价值：67}，
{数值指明MyTime：2015-12-01T23：20：00.000Z，价值：70}，
{数值指明MyTime：2015-12-01T23：25：00.000Z，价值：64}，
{数值指明MyTime：2015-12-01T23：30：00.000Z，价值：72}，
{数值指明MyTime：2015-12-01T23：35：00.000Z，价值：75}，
{数值指明MyTime：2015-12-01T23：40：00.000Z，价值：71}，
{数值指明MyTime：2015-12-01T23：45：00.000Z，价值：80}，
{数值指明MyTime：2015-12-02T00：00：00.000Z，价值：80}，
{数值指明MyTime：2015-12-02T00：05：00.000Z，价值：85}
];VAR parseDate = d3.time.format（％Y-％M-％胸苷％H：％M：％S.％LZ）。分析;data.forEach（函数（D）{
d.mytime = parseDate（d.mytime）;
}）;变种act_data = []; VAR x_extent = d3.extent（数据，功能（D）{
返回D ['数值指明MyTime']}）; time_arr = d3.time.minute.range（x_extent [0]，x_extent [1]，5）;
对（在time_arr VAR键）{
VAR温度;
TEMP =包含（数据，time_arr [关键]，'数值指明MyTime'）;
}
函数包含（数据，值，变量）
{
VAR I = data.length;
当我 - ）{ 如果（数据[I] [变量] ===值）
{
的console.log（'发现'）;
返回我;
}
}
返回false;
}
输出应该是这样的：
数据= [{数值指明MyTime：2015-12-01T23：10：00.000Z，价值：64}，
{数值指明MyTime：2015-12-01T23：15：00.000Z，价值：67}，
{数值指明MyTime：2015-12-01T23：20：00.000Z，价值：70}，
{数值指明MyTime：2015-12-01T23：25：00.000Z，价值：64}，
{数值指明MyTime：2015-12-01T23：30：00.000Z，价值：72}，
{数值指明MyTime：2015-12-01T23：35：00.000Z，价值：75}，
{数值指明MyTime：2015-12-01T23：40：00.000Z，价值：71}，
{数值指明MyTime：2015-12-01T23：45：00.000Z，价值：80}，
{数值指明MyTime：2015-12-01T23：50：00.000Z，价值：空}
{数值指明MyTime：2015-12-01T23：55：00.000Z，价值：空}
{数值指明MyTime：2015-12-02T00：00：00.000Z，价值：80}，
{数值指明MyTime：2015-12-02T00：05：00.000Z，价值：85}
];
解决方案
您可以使用
-
d3.time.format的解析和格式化日期 -
d3.extent，以确定您的时间戳的边界 -
d3.time.scale来生成输出你想要的蜱 - 和
d3.map散列输入，并确定是否存在一个值
这给了我们
VAR数据= [];//解析和格式化
VAR TIMEFORMAT = d3.time.format（％Y-％M-％胸苷％H：％M：％S.％LZ）;//范围上操作
VAR程度= d3.extent（数据，功能（D）{
返回timeformat.parse（d.mytime）;
}）;//规模再presenting时间戳
VAR规模= d3.time.scale（）
。域（程度）//边界
.ticks（d3.time.minute，5）; //每隔5分钟//容易，以确定是否存在一个值
VAR散列= d3.map（数据，功能（D）{返回d.mytime;}）;//或者如果你的版本＆LT; 3.5
/ *
变种散列= d3.map（）;
data.forEach（函数（D）{
hashed.set（d.mytime，D）;
}）;
* /
//变换尺度成所需的输出
VAR解析度= scale.map（功能（T）{
VAR英尺= TIMEFORMAT（T）;
返回{
数值指明MyTime：FT，
值：（hashed.has（英尺））？ hashed.get（英尺）.value的：空
};
}）;
和演示 http://jsfiddle.net/nikoshr/qxcLry8z/
\r
\r\r
\r VAR数据= [\r
{数值指明MyTime：2015-12-01T23：10：00.000Z，价值：64}，\r
{数值指明MyTime：2015-12-01T23：15：00.000Z，价值：67}，\r
{数值指明MyTime：2015-12-01T23：20：00.000Z，价值：70}，\r
{数值指明MyTime：2015-12-01T23：25：00.000Z，价值：64}，\r
{数值指明MyTime：2015-12-01T23：30：00.000Z，价值：72}，\r
{数值指明MyTime：2015-12-01T23：35：00.000Z，价值：75}，\r
{数值指明MyTime：2015-12-01T23：40：00.000Z，价值：71}，\r
{数值指明MyTime：2015-12-01T23：45：00.000Z，价值：80}，\r
{数值指明MyTime：2015-12-02T00：00：00.000Z，价值：80}，\r
{数值指明MyTime：2015-12-02T00：05：00.000Z，价值：85}\r
];\r
\r
\r
VAR TIMEFORMAT = d3.time.format（％Y-％M-％胸苷％H：％M：％S.％LZ）;\r
\r
VAR程度= d3.extent（数据，功能（D）{\r
返回timeformat.parse（d.mytime）;\r
}）;\r
\r
VAR规模= d3.time.scale（）\r
。域（程度上）\r
.ticks（d3.time.minute，5）;\r
\r
变种散列= d3.map（）;\r
data.forEach（函数（D）{\r
hashed.set（d.mytime，D）;\r
}）;\r
\r
VAR解析度= scale.map（功能（T）{\r
VAR英尺= TIMEFORMAT（T）;\r
返回{\r
数值指明MyTime：FT，\r
值：（hashed.has（英尺））？ hashed.get（英尺）.value的：空\r
};\r
}）;\r
\r
变量$表= $（'＆LT;表＆gt;＆LT; /表＆gt;'）;\r
res.forEach（函数（D）{\r
$table.append('<tr><td>'+d.mytime+'</td><td>'+d.value+'</td></tr>')\r
}）;\r
$（身体）追加（$表）。\r
\r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js＆GT;＆LT; / SCRIPT＆GT; \r
In D3.js i am currently trying to populate an empty array (array contains only time stamp after every 5 minutes) based on data array contains that time or not . If data array contains the time, it should copy the value otherwise null. But when i am trying to compare the two time objects its not working correctly.
Following is the code (the current code is not copying values but printing to make debugging easier):
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;
}
Output should be this:
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}
];
解决方案
You can use
d3.time.formatto parse and format your datesd3.extentto determine the boundaries of your timestampsd3.time.scaleto generate the ticks you want to output- and
d3.mapto hash your input and determine if a value exists
This gives us
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
};
});
And a demo 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>
这篇关于比较D3.js两个时间对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
