Question

我在脚本标记中有以下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。

Answer 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。

Answer 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

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

2 个答案: