在 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