javascript - 在 D3.js 中过滤 CSV 的多行并更新键盘输入的过滤器

Question

我在过滤 csv 数据和更新 D3.js 中的一些 SVG 时遇到一些问题。

问题 1

加载时我想从 csv 中过滤出多行。我成功地加载了数据并仅过滤了一行。然后我对多行尝试了类似的方法，但这不起作用。

d3.csv("sample-data.csv", function(data){
  date = data.filter(function(row) {
      return row['YYYYMMDD'] == '20100901';
  })

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      return row['YYYYMMDD'] == (i +"0901");
    } 
  });

  createVis();
}

问题 2:

根据用户输入(左/右键按下)，我想更改过滤的日期和时间段并更新一些 SVG。

示例:
当前日期是:20100903。用户点击右箭头键，YYYYMMDD 列中包含 20100904 的行的日期会发生变化，期间也会随之变化，就像我在问题 1 的 for 循环中一样。

我只是陷入了这个困境，因为我不知道如何构建我的代码。

我的 csv 数据示例:

YYYYMMDD, DDVEC, FHVEC, FG  
20100901, 31, 51, 57
20100902, 245, 20, 51
20100903, 279, 51, 62
20100904, 220, 36, 46
20100905, 284, 26, 41

请注意，我的 csv 最终将包含更多数据。

预先感谢您的帮助。

Answer 1

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      return row['YYYYMMDD'] == (i +"0901");
    } 
  });

不会有机会迭代 i 的所有值，因为 return 语句将在第一次迭代时触发。为了保持结构基本完整，您可以进行一些小的修改:

  period = data.filter(function(row){
    for (var i = 1950; i < 2013; i++) {
      if (row['YYYYMMDD'] == (i +"0901")) { return true; }
    }
    return false; 
  });

只有匹配时才返回True；如果循环结束时没有匹配，则返回 False。

要改进结构，请简化您要检查的内容:

  period = data.filter(function(row){
    var dateNum = +row['YYYYMMDD'];
    return 19500901 <= dateNum && dateNum <= 20130901;
  });

在这里，您的字符串日期将使用 + 转换为整数，并执行简单的算术(这不可能对字符串执行，因为它们使用字典比较)来检查日期是否在范围。

理想情况下，您的日期应以 actual dates 表示- 如果您的日期格式正确，一切都会变得容易得多。要将日期字符串转换为日期对象:

period.forEach(function(d){
  d.date = d3.format('%Y%m%d').parse(d.date);
})

要检查给定行的日期是否满足您指定的条件:

   row.date.getDate() == 1   && row.getMonth() == 8 
&& 1950 <= row.getFullYear() && row.getFullYear() <= 2012