使用 D3 读取 csv 返回 html 而不是 csv 数据答案

【问题标题】：Using D3 to read csv returns html instead of csv data使用 D3 读取 csv 返回 html 而不是 csv 数据
【发布时间】：2016-04-22 05:32:06
【问题描述】：

我在脚本标签中有以下 d3 代码：

  d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
      console.log(data[0]);

      d.date = parseDate(d.date);
      d.close = +d.close;
    });
    console.log("hello2")

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));

    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    svg.append("path") // Add the valueline path.
    .attr("class", "line")
    .attr("d", valueline(data));

    svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g") // Add the Y Axis
    .attr("class", "y axis")
    .call(yAxis);

  });

当我在浏览器中检查控制台时，console.log 的输出是 Object {<!DOCTYPE html>: "</head>"}。我预计输出为{"date": "1-May-12", close: "58.13"}。

为什么回调函数使用我的 html 作为数据参数而不是我的 CSV 数据？请注意，我还在运行一个简单的节点服务器，因此我可以读取 CSV。

【问题讨论】：

同时粘贴 data.csv 中的内容
github.com/mbostock/d3/wiki/CSV#csv > 如果发生错误，回调函数将改为以 null 调用。函数（错误，数据）-> 函数（数据）请。
date,close 1-May-12,58.13 30-Apr-12,53.98 27-Apr-12,67.00 26-Apr-12,89.70 25-Apr-12,99.00 这就是我的 CSV @Cyril 中的内容

标签： csv d3.js

【解决方案1】：

让我们从头开始...我试图从与包含 D3 脚本的 html 相同的文件夹中读取本地 csv data.csv。这不起作用，因为有内置的浏览器安全措施阻止您从本地计算机读取。在没有意识到这是导致问题的原因的情况下，我阅读了其他 SO 答案，这些答案导致我编写自己的节点服务器来本地提供我的 html 和 csv。就在那时，导致我创建这个 SO 问题的错误发生了。

现在的问题是，当我的 D3 脚本试图读取 data.csv 时，它正在读取包含 D3 脚本的 html 文件； D3 是在 basic_chart.html 而不是 data.csv 中读取的。这就是为什么我得到一个具有描述 html 文件而不是 csv 的键值对的对象。我确定这与我的服务器脚本有关，但我没有重写服务器脚本，而是使用了来自 D3.js loading local data file from file:/// 的最佳答案，并通过在目标文件中的命令行上键入 python -m SimpleHTTPServer 8888 & 来提供我的 html 和 csv文件夹。有效。希望这可以帮助其他人。感谢您的帮助@Cyril。

【讨论】：

【解决方案2】：

你的 CSV 不应该是单行的

应该是这样的：

date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00

然后你可以像这样读取 csv

 d3.csv("data.csv", function(error, data) {
    var parseDate = d3.time.format("%d-%b-%y");
    data.forEach(function(d) {
      d.date = parseDate.parse(d.date);
      d.close = +d.close;
    });
    console.log(data)
 })

工作代码here

【讨论】：

var parseDate = d3.time.format("%d-%b-%y").parse; 在代码前面已声明。另外，我也收到以下错误：d3.v3.min.js:1 Uncaught TypeError: Cannot read property 'length' of undefined
var parseDate = d3.time.format("%d-%b-%y").parse; 这不是您传递的 csv 的问题，您可以检查我的工作 plnk 代码并相应地更改您的代码。
csv 已经是那种格式，用逗号和换行符分隔。抱歉，我无法在评论中正确格式化它。