在D3.js中过滤多个CSV行并在键盘输入上更新过滤器 [英] Filter multiple rows of a CSV in D3.js and update filter on keyboard input

问题描述

我在筛选 csv 资料和更新中的一些 SVG c> D3.js 。

第1期

在加载时，我想从csv中筛选多行。
我成功加载数据和过滤只有一行。然后我尝试了一个类似的方法为多行，但这不工作。

  d3.csv（sample-data.csv ，function（data）{
 date = data.filter（function（row）{
 return row ['YYYYMMDD'] =='20100901'; 
}）
 b $ b 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最终会包含

感谢您的帮助。

解决方案

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

不会有机会迭代i的所有值，因为return语句将被触发在第一次迭代。为了保持你的结构大体完整，你可以做一个小的修改：

  period = data.filter b $ b for（var i = 1950; i <2013; i ++）{
 if（row ['YYYYMMDD'] ==（i +0901））{return true;} 
} 
 return false; 
}）; 
  

只有在匹配时才会返回True;

要改善结构，请简化您要检查的内容：

  period = data.filter（function（row）{
 var dateNum = + row ['YYYYMMDD']; 
 return 19500901< = dateNum &&& amp;&&&&&&& 
  

这里，您的字符串日期转换为一个整数 +



理想情况下，c $ c>和简单算术（这是不可能在字符串上进行的，因为他们使用词典比较） ，您的日期应以实际日期表示 - 如果您的日期在右侧格式，一切都容易得多。要将日期字符串转换为日期对象：

  period.forEach（function（d）{
 d.date = d3.format（'％Y％m％d'）。parse（d.date）; 
}）
  


b $ b

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

  row.date .getDate（）== 1&& row.getMonth（）== 8 
&& 1950< = row.getFullYear（）&&& row.getFullYear（）< = 2012 
  




I'm having some issues with filtering csv data and updating some SVG's in D3.js.

Issue 1

On load I want to filter multiple rows out of a csv. I succeeded with loading the data and filtering just one row. Then I tried a similar approach for multiple rows but this didn't work.

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();
}

Issue 2:

Based on user input (left/right key down) I want to change the filtered date and period and update some SVG's.

Example:
Current date is: 20100903. User taps right arrow key, date changes to the row that contains 20100904 in the YYYYMMDD column and period changes along with it like in my for loop of issue 1.

Im just simply stuck on this one as I don't know how to structure my code.

Sample of my csv data:

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

Note that my csv will eventually contain a lot more data.

Thanks in advance for your help.

解决方案

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

Won't get a chance to iterate over all the values of i since the return statement will be triggered on the first iteration. To keep your structure mostly intact, you could make a small modification:

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

True will be returned only if there is a match; if the loop finishes with no matches False will be returned.

To improve the structure, simplify what you're checking for:

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

Here, your string date is converted to an integer with + and simple arithmetic (which isn't possible to do on strings since they use lexicographic comparisons) is done to check if the date is in range.

Ideally, your dates should be represented with actual dates - if your date is in the right format, everything is much easier. To convert the date strings to date objects:

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

To check if a given row has a date meeting the critera you've specified:

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

这篇关于在D3.js中过滤多个CSV行并在键盘输入上更新过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！