比较D3.js中的两个时间对象

wvyml7n5  于 2023-11-19  发布在  其他
关注(0)|答案(3)|浏览(113)

在D3.js中，我目前正在尝试根据数据数组是否包含时间来填充一个空数组（数组只包含每5分钟后的时间戳）。如果数据数组包含时间，它应该复制值，否则为null。但是当我尝试比较两个时间对象时，它无法正常工作。
以下是代码（当前代码不是复制值，而是打印以使调试更容易）：

  1. var data = [{"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
  2. {"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
  3. {"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
  4. {"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
  5. {"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
  6. {"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
  7. {"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
  8. {"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
  9. {"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
  10. {"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
  11. ];
  13. var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
  15. data.forEach(function(d) {
  16.           d.mytime = parseDate(d.mytime);
  17.  });
  19. var act_data = [];
  21.   var x_extent = d3.extent(data, function(d){
  22.       return d['mytime']});
  24.   time_arr = d3.time.minute.range(x_extent[0],x_extent[1],5);
  25.   for(var key in time_arr){
  26.   var temp;
  27.   temp = contains(data,time_arr[key],'mytime');
  28. }
  30. function contains(data,value,variable)
  31. {
  32.   var i =data.length;
  33.   while(i--){
  35.    if (data[i][variable] === value)
  36.    {
  37.     console.log('found');
  38.     return i;
  39.    } 
  40.   }
  41.   return false;
  42. }

字符串
输出应为：

  1. data = [{"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
  2. {"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
  3. {"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
  4. {"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
  5. {"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
  6. {"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
  7. {"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
  8. {"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
  9. {"mytime": "2015-12-01T23:50:00.000Z", "value": null},
  10. {"mytime": "2015-12-01T23:55:00.000Z", "value": null},
  11. {"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
  12. {"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
  13. ];

型

d3.js

3条答案

按热度按时间
qeeaahzv

qeeaahzv1#

你可以这样做：

  1. var extent = d3.extent(data, function(d){ return d.mydate});//get the max min limit
  2. var data1 = []; make an empty array
  3. for (var i =0; i < data.length -1; i++){
  4.     var diff = data[i + 1].mytime.getTime() - data[i].mytime.getTime();
  5.     if (diff <= 300000){ //less than equal to 5 minutes
  6.         data1.push(data[i])
  7.     } else { //greater than 5 minutes
  8.       var t1 = new Date(data[i].mytime.getTime() + 300000)
  9.         var t2 = new Date(data[i +1].mytime.getTime() - 300000)
  10.         data1.push({"mytime": t1, "value": null})
  11.         data1.push({"mytime": t2, "value": null})
  12.     }
  13. }
  14. data1.push(data[data.length -1]); //take the last value as it was not processed
  15. data = data1

字符串
工作代码here

展开查看全部
赞(0）分享  回复(0）举报  2023-11-19
kninwzqo

kninwzqo2#

随着ES6的出现，有更多的选项可以解决这个问题。根据需要支持的浏览器版本，下面的代码可能是一个可行的方法。我已经在Chrome 49和FF 45上成功测试了这个方法。
该解决方案将自定义generator function添加到data数组中，该数组将返回符合新iteration protocols的Generator对象。这将覆盖data数组并填充它检测到的任何间隙，沿着将value属性设置为null的对象。
代码片段进一步使用spread operator创建一个新数组，并通过隐式调用迭代器填充它。

  1. data[Symbol.iterator] = function*() {
  2.   var i = 0,
  3.       t = this[0],
  4.       nextStep;
  5.   while (i < this.length) {
  6.     nextStep = t.mytime.getTime() + FIVE_MINUTES_IN_MS;
  7.     yield t = nextStep < this[i].mytime.getTime()
  8.       ? {"mytime": new Date(nextStep), "value": null}
  9.       : this[i++];
  10.   }
  11. };
  13. // use the spread operator to create a new array which will implicitly call
  14. // the iterator
  15. data = [...data];

字符串
看看下面的代码片段，看看在Chrome 49和FF 45中运行的演示：

  1. "use strict";
  3. ///////////////////////////////////////////////////////////////////////////
  4. // Setup
  5. ///////////////////////////////////////////////////////////////////////////
  7. const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
  9. var data = [
  10. {"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
  11. {"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
  12. {"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
  13. {"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
  14. {"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
  15. {"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
  16. {"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
  17. {"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
  18. {"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
  19. {"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
  20. ];
  22. var parse = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
  24. data.forEach(function(d) {
  25.   d.mytime = parse(d.mytime);
  26. });
  28. ///////////////////////////////////////////////////////////////////////////
  29. // Implement iterator to fill in gaps in data array
  30. ///////////////////////////////////////////////////////////////////////////
  32. data[Symbol.iterator] = function*() {
  33.   var i = 0,
  34.       t = this[0],
  35.       nextStep;
  36.   while (i < this.length) {
  37.     nextStep = t.mytime.getTime() + FIVE_MINUTES_IN_MS;
  38.     yield t = nextStep < this[i].mytime.getTime()
  39.       ? {"mytime": new Date(nextStep), "value": null}
  40.       : this[i++];
  41.   }
  42. };
  44. // use the spread operator to create a new array which will implicitly call the iterator
  45. data = [...data];
  47. ///////////////////////////////////////////////////////////////////////////
  48. // Just output below.
  49. ///////////////////////////////////////////////////////////////////////////
  51. //console.dir(data);
  53. d3.select("body").append("div")
  54. 	.style({
  55.     "font-family": "monospace",
  56.     "white-space": "pre"
  57.   })
  58.   .text(JSON.stringify(data, null, 2));
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

的数据
或者，你可以提供一个迭代器协议的显式实现。这写起来有点冗长，但不会改变整体概念：

  1. data[Symbol.iterator] = function() {
  2.   var self = this;
  3.   return {
  4.     i: 0,
  5.     t: self[0],
  6.     next() {
  7.       if (this.i < self.length) {
  8.         var nextStep = this.t.mytime.getTime() + FIVE_MINUTES_IN_MS;
  9.         this.t = nextStep < self[this.i].mytime.getTime()
  10.           ? { "mytime": new Date(nextStep), "value": null }
  11.           : self[this.i++];
  12.         return {
  13.           value: this.t,
  14.           done:  false
  15.         }
  16.       } else {
  17.         return {
  18.           done: true
  19.         }
  20.       } 
  21.     }
  22.   }
  23. };

型
下面的代码片段演示了这一点：

  1. "use strict";
  3. ///////////////////////////////////////////////////////////////////////////
  4. // Setup
  5. ///////////////////////////////////////////////////////////////////////////
  7. const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
  9. var data = [
  10. {"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
  11. {"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
  12. {"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
  13. {"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
  14. {"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
  15. {"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
  16. {"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
  17. {"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
  18. {"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
  19. {"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
  20. ];
  22. var parse = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
  24. data.forEach(function(d) {
  25.   d.mytime = parse(d.mytime);
  26. });
  28. ///////////////////////////////////////////////////////////////////////////
  29. // Implement iterator to fill in gaps in data array
  30. ///////////////////////////////////////////////////////////////////////////
  32. data[Symbol.iterator] = function() {
  33.   var self = this;
  34.   return {
  35.     i: 0,
  36.     t: self[0],
  37.     next() {
  38.       if (this.i < self.length) {
  39.         var nextStep = this.t.mytime.getTime() + FIVE_MINUTES_IN_MS;
  40.         this.t = nextStep < self[this.i].mytime.getTime()
  41.           ? { "mytime": new Date(nextStep), "value": null }
  42.           : self[this.i++];
  43.         return {
  44.           value: this.t,
  45.           done:  false
  46.         }
  47.       } else {
  48.         return {
  49.           done: true
  50.         }
  51.       } 
  52.     }
  53.   }
  54. };
  56. // use the spread operator to create a new array which will implicitly call the iterator
  57. data = [...data];
  59. ///////////////////////////////////////////////////////////////////////////
  60. // Just output below.
  61. ///////////////////////////////////////////////////////////////////////////
  63. //console.dir(data);
  65. d3.select("body").append("div")
  66. 	.style({
  67.     "font-family": "monospace",
  68.     "white-space": "pre"
  69.   })
  70.   .text(JSON.stringify(data, null, 2));
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
展开查看全部
赞(0）分享  回复(0）举报  2023-11-19
gopyfrb3

gopyfrb33#

您可以使用（D3 3.x API）

  • d3.time.format解析和格式化日期
  • d3.extent来确定时间戳的边界
  • d3.time.scale以生成要输出的分笔成交点
  • 和d3.map对输入进行散列并确定值是否存在

这给了我们

  1. var data = [...];
  3. // for parsing and formatting
  4. var timeformat = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
  6. // range to operate on
  7. var extent = d3.extent(data, function(d){ 
  8.     return timeformat.parse(d.mytime); 
  9. });
  11. // scale representing the time stamps
  12. var scale = d3.time.scale()
  13.     .domain(extent) // the boundaries
  14.     .ticks(d3.time.minute, 5); // 5 minutes intervals
  16. // easier to determine if a value exists
  17. var hashed = d3.map(data, function(d) { return d.mytime; });
  19. // or if your version < 3.5
  20. /*
  21. var hashed = d3.map();
  22. data.forEach(function(d) { 
  23.     hashed.set(d.mytime, d);
  24. });
  25. */
  27. // transforms the scale into the desired output
  28. var res = scale.map(function(t) {
  29.     var ft = timeformat(t);
  30.     return {
  31.         mytime: ft,
  32.         value: (hashed.has(ft)) ? hashed.get(ft).value : null
  33.     };
  34. });

字符串
以及一个http://jsfiddle.net/nikoshr/qxcLry8z/演示

  1. var data = [
  2. {"mytime": "2015-12-01T23:10:00.000Z", "value": 64},
  3. {"mytime": "2015-12-01T23:15:00.000Z", "value": 67},
  4. {"mytime": "2015-12-01T23:20:00.000Z", "value": 70},
  5. {"mytime": "2015-12-01T23:25:00.000Z", "value": 64},
  6. {"mytime": "2015-12-01T23:30:00.000Z", "value": 72},
  7. {"mytime": "2015-12-01T23:35:00.000Z", "value": 75},
  8. {"mytime": "2015-12-01T23:40:00.000Z", "value": 71},
  9. {"mytime": "2015-12-01T23:45:00.000Z", "value": 80},
  10. {"mytime": "2015-12-02T00:00:00.000Z", "value": 80},
  11. {"mytime": "2015-12-02T00:05:00.000Z", "value": 85}
  12. ];
  14. var timeformat = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
  16. var extent = d3.extent(data, function(d){ 
  17.     return timeformat.parse(d.mytime); 
  18. });
  20. var scale = d3.time.scale()
  21.     .domain(extent)
  22.     .ticks(d3.time.minute, 5);
  23.   
  24. var hashed = d3.map();
  25. data.forEach(function(d) { 
  26.     hashed.set(d.mytime, d);
  27. });
  28.   
  29. var res = scale.map(function(t) {
  30.     var ft = timeformat(t);
  31.     return {
  32.         mytime: ft,
  33.         value: (hashed.has(ft)) ? hashed.get(ft).value : null
  34.     };
  35. });
  37. var $table = $('<table></table>'); 
  38. res.forEach(function(d) {
  39.     $table.append('<tr><td>'+d.mytime+'</td><td>'+d.value+'</td></tr>')
  40. });
  41. $('body').append($table);
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

的数据

展开查看全部
赞(0）分享  回复(0）举报  2023-11-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com