如何从csv文件中提取数据并在D3.js中从中创建折线图

时间:2015-02-25 04:27:57

标签: csv d3.js

我一直在尝试从csv文件中提取数据,并根据该数据绘制折线图。我的代码段如下:

d3.csv("data_01.csv", function(error, data) {

    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.attendee = +d.attendee; });

x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain(d3.extent(data, function(d) { return d.attendee; }));

var line = d3.svg.line()
             .x(function(d) { return x(d.date); })
             .y(function(d) { return y(d.attendee); });

svg.append("path")
       .datum(data)
       .attr("class", "line")
       .attr("d", line);

}) ;

data_01.csv文件包含以下数据:

date, attendee
12-Feb-12,80
27-Feb-12,56
02-Mar-12,42
14-Mar-12,63
30-Mar-12,64
07-Apr-12,72
18-Apr-12,65
02-May-12,80
19-May-12,76
28-May-12,66
03-Jun-12,64
18-Jun-12,53
29-Jun-12,59

我无法理解为什么会出现这个问题。是因为必须存储csv文件的位置。请帮助我。

感谢。

1 个答案:

答案 0 :(得分:0)

我也遇到过这个问题,发现它必须对跨域资源共享做一些事情。 Chrome不支持它,但Firefox支持它。 我所知道的解决方案是:

  1. 使用Mozilla firefox或
  2. 在服务器上部署您的应用,然后尝试访问它。您可以使用节点。