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

Question

我正在进行基本的 d3 收费，使用 d3.csv 提取数据，然后在像这样的匿名函数中转发它

d3.csv("https://example.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 数据。 ，它删除了上面的匿名函数。日志语句显示了与上面完全相同的对象数组，但是当我这样做时，图表不会显示，并且我收到一个似乎由数组 Uncaught TypeError: Cannot read property ' 引起的错误未定义的长度

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

这是第一种方法的 fiddle https://jsfiddle.net/mjmitche/5Y6kf/3/这是第二个的 fiddle not working fiddle

Answer 1

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

当您尝试访问 zeit 时，这会导致问题该行对象的属性:

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

如果删除 <pre id="csvdata"> 中的缩进然而，zeit解析正确，您会得到如下图:

这是一个working fiddle .

<小时/>

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

Uncaught ReferenceError: padding is not defined