使用D3读取CSV返回html的CSV数据

问题描述：

我已经script标签内的下列D3代码代替：使用D3读取CSV返回html的CSV数据

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 – Cyril

https://github.com/mbostock/d3/wiki/CSV#csv >如果发生错误，回调函数将被调用null。功能（错误，数据） - >功能（数据）请。 –

'日期，结束 1 - 5月份，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 – PC3SQ

答

您的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：无法读取未定义的属性'长度' – PC3SQ

'var parseDate = d3.time.format（“％d-％b - ％y“）。parse;'这不是问题问题在于您传递的csv，您可以检查我的工作plnk代码并相应地更改您的代码。 – Cyril

csv已经采用了这种格式，用逗号和换行符分隔。对不起，我无法在评论中正确格式化它。 – PC3SQ

答

让我们从头开始......我试图读取本地csv data.csv来自与包含D3脚本的html相同的文件夹。这是行不通的，因为内置的浏览器安全措施会阻止您从本地计算机读取数据。没有意识到这是导致问题的原因，我阅读了其他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。

使用D3读取CSV返回html的CSV数据

相关推荐