D3 - 加载没有标题的数据

Question

我刚刚开始使用D3而且刚刚开门,我无法上手.我确信解决方案很简单,我无法找到它或理解答案.

我试图在文本文件data.txt中加载数据,但数据没有任何标题; 三列,制表符分隔.

06/20/2014 13:00    3666    -134    
06/20/2014 13:10    3744    65    
06/20/2014 13:20    3778    2    
06/20/2014 13:30    3804    2    
06/20/2014 13:40    3865    -1    
06/20/2014 13:50    3924    2    
06/20/2014 14:00    3939    -173    
06/20/2014 14:10    3966    -121    
06/20/2014 14:20    3989    -108    
06/20/2014 14:30    4000    -117    
06/20/2014 14:40    3729    -109    
06/20/2014 14:50    4022    -94    
06/20/2014 15:00    3794    -204    
06/20/2014 15:10    3629    53    
06/20/2014 15:20    3572    179    
06/20/2014 15:30    3847    166

我想用第二列数据绘制一条线.

我还有一个更大的文件,我想从一行168列长的数据中画一条线:

OFFICIAL,2014-06-30 22:00:00,BAW,361,459,536,591,677,720,725,707,611,524,446,382,339,289,238,183,170,227,393,....

我知道如何根据我的Processing经验来绘制图形,但我无法弄清楚如何获取数据列和D3代码中标识的数据行.

Answer 1

正如您所发现的那样,d3文件解析函数希望数据采用标准表格式,第一行包含列标题.

但是,有相同方法的变体可以让您获得更好的控制(有关更多信息,请参阅d3 API wiki).对于无头数据表,方法是:

• 使用d3.text(filename, function(error, textString) )读取整个文件,而不对它进行分析.

• 在回调函数中,用于d3.tsv.parseRows(textString)生成数据数组而不分配列标题.

  var data = d3.tsv.parseRows(textString)
  

  然后,每个数据值将由一个带编号的数组组成,以便您可以访问日期d[0],时间d[1]等等.

• 或者,您可以创建自己的标题行作为一组制表符分隔标签,并将其连接到数据文件中文本字符串的开头,并使用其中一种parse方法.

  var headers = ["date","time","data1","data2"].join("\t");
  var data = d3.tsv.parse(headers + textString)
  

在任何一种情况下,最终结果都是一个数据点数组,每个数据点都包含多个值.通过d3.svg.line()在设置适当的访问器函数(使用数组表示法或对象名称表示法,取决于是否添加标题)后将此数组传递给函数来计算路径数据.维基的教程部分有很多线图的例子.

对于您在一个CSV文件中作为单行的数据文件,您将需要使用上述parseRows方法.这将返回一个单元素数据数组(代表您的一行),但该元素将是您真正感兴趣的数据数组.您必须将初始值切片以获取数字列表:

    var rowData = d3.tsv.parseRows(textString)[0];
    var data = rowData.slice(3);