XMLHttpRequest无法加载文件？

Question

d3.csv("result.csv", function(flights) {
    var nestByDate = d3.nest()
    .key(function(d) { return d3.time.day(d.date); });
    ..........

当我尝试在Web服务器上运行d3.js代码时，它会通过加载csv文件正确执行d3.js。

但是当我尝试运行如下所示的d3.js时，

d3.csv("D:\\Project Space\\D3Demo\\WebContent\\result.csv", function(flights) {
    var nestByDate = d3.nest()
    .key(function(d) { return d3.time.day(d.date); });
    ..........

然后显示以下错误：

  

XMLHttpRequest无法加载file：/// D：/Project%20Space/D3Demo/WebContent/result.csv。只有HTTP`

支持跨源请求

如何解决这个问题？

Answer 1

使用D3的便利功能无法解决问题。

d3.csv从根本上说是一个AJAX请求，并且对同源策略感兴趣。

当您加载文件位置时，您的浏览器会意识到所请求的文件不存在于同一个域（可能是您的案例中的localhost）中，并阻止请求完成。

解决此问题的一种简单方法是简单地通过localhost或您正在使用的任何内容提供内容。

或者，您可以查看Cross-origin Resource Sharing，或者为了更好的兼容性：JSONP。在这两种情况下，您可能必须使用自己的功能将CSV数据转换为javascript数组。