嵌入csv数据后替换匿名函数

Question

我正在进行基本的d3充电，使用d3.csv提取数据，然后将其转发到像这样的匿名函数中

d3.csv("https://blahblah.com/report.csv", function(error, data) {
console.log(data);

data.forEach(function(d) {
        d.zeit = parseDate(d.zeit);
        d.total = +d.total;
        d.count = d.count;
    });
...//code ommitted

});

然而，由于没有太多数据，我认为会使用this answer中描述的技术嵌入csv数据，这将删除上面的匿名函数。 log语句显示一个与上面完全相同的对象数组，但是当我这样做时，图表不显示，我得到一个似乎来自数组的错误Uncaught TypeError: Cannot read property 'length' of undefined

  var raw = d3.select("#csvdata").text();
  var data = d3.csv.parse(raw);
  console.log(data)
  data.forEach(function(d) {
            d.zeit = parseDate(d.zeit);
            d.total = +d.total;
            d.count = d.count;
        });
 ...

这是第一种方法http://jsfiddle.net/mjmitche/5Y6kf/3/的小提琴，这是第二种方法的小提琴not working fiddle

Answer 1

您遇到的问题来自<pre id="csvdata">中CSV数据的缩进。由于您有缩进，因此标头被解析为" zeit"，而不是"zeit"。第一列中的每次都是如此。这是我的控制台在解析当前数据时产生的示例对象的输出：

当您尝试访问此行上对象的zeit属性时，会出现问题：

d.zeit = parseDate(d.zeit); // current place your code breaks

但是，如果删除<pre id="csvdata">中的缩进，则zeit会被正确解析，您会看到如下图：

这是working fiddle。

---

请注意，即使修复了缩进问题，您的代码仍然存在错误：

  

    

未捕获的ReferenceError：未定义填充

  

Answer 2

嵌入数据时，您正在添加无关的空格。而不是：

<pre id="csvdata">
    zeit,count,total,avg
    5:30,0,0,0
    6:00,14,41.1, $2.94 
    6:30,19,52, $2.74 
    7:00,21,74, $3.52 
    7:30,28,143.25, $5.12 
    8:00,30,141.3, $4.71 
    8:30,32,124.28, $3.88 
    9:00,24,74.8, $3.12 
    9:30,47,172.35, $3.67 
    10:00,27,119.77, $4.44 
    10:30,40,210.44, $5.26 
    11:00,29,150.95, $5.21 
    11:30,14,80.3, $5.74 
</pre>

尝试：

<pre id="csvdata">
zeit,count,total,avg
5:30,0,0,0
6:00,14,41.1, $2.94 
6:30,19,52, $2.74 
7:00,21,74, $3.52
7:30,28,143.25, $5.12 
8:00,30,141.3, $4.71 
8:30,32,124.28, $3.88 
9:00,24,74.8, $3.12 
9:30,47,172.35, $3.67 
10:00,27,119.77, $4.44 
10:30,40,210.44, $5.26 
11:00,29,150.95, $5.21 
11:30,14,80.3, $5.74 
</pre>