logo标签列表

使用D3读取csv文件返回的是HTML而不是CSV数据

csvd3.js
3

我有以下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数据作为数据参数？请注意，我还运行了一个简单的node服务器，以便可以读取CSV。
同时粘贴“data.csv”文件中的内容。data.csv文件中没有任何内容。 - Cyril Cherian
1
如果发生错误，回调函数将被调用并返回 null。将 function(error, data) 转换为 function(data)。 - David Guan
日期, 收盘价 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 - PC3SQ
2个回答
3
让我们从头开始……我试图从包含D3脚本的同一文件夹中读取本地csv数据.csv。由于内置浏览器安全措施防止您从本地机器读取，所以这并没有起作用。没有意识到这是导致问题的原因，我阅读了其他SO答案，这些答案让我编写自己的节点服务器来本地提供我的html和csv。这就是导致我创建这个SO问题的错误。
现在的问题是，当我的D3脚本尝试读取data.csv时，它正在读取包含D3脚本的html文件；D3是在basic_chart.html而不是data.csv中读取的。这就是为什么我得到了一个描述html文件的键值对对象而不是csv的原因。我确定这与我的服务器脚本有关，但我没有重写服务器脚本，而是使用了中最好的答案，并通过在目标文件夹中输入python -m SimpleHTTPServer 8888 &来提供我的html和csv命令行。它奏效了。希望这能帮助其他人。感谢@Cyril的帮助。
0
你的 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)
 })

可运行的代码 在这里

var parseDate = d3.time.format("%d-%b-%y").parse; 在代码中早已声明。同时，我也遇到了以下错误：d3.v3.min.js:1 Uncaught TypeError: Cannot read property 'length' of undefined。 - PC3SQ
var parseDate = d3.time.format("%d-%b-%y").parse; 这不是问题， 问题在于你传递的 csv，你可以查看我的工作 plnk 代码并相应地更改你的代码。 - Cyril Cherian
CSV文件已经是以逗号和换行符分隔的格式了。抱歉，我无法在上面的注释中正确格式化它。 - PC3SQ
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接