无法在d3中从csv文件导入数据

Question

我正在学习d3，试图从CSV文件中导入数据，但是一直收到错误信息“XMLHttpRequest无法加载file:///Users/Laura/Desktop/SampleECG.csv。跨域请求仅支持HTTP。”。我已经搜索了如何解决此错误，并在本地Web服务器上运行它，但没有找到适用于d3.v2.js的解决方案。以下是代码示例：

var Time = []
    ECG1 = []

d3.csv("/Desktop/d3Project/Sample.csv", function(data) 
      {
      Time = data.map(function(d) {return [+d["Time"]];});
      ECG1 = data.map(function(d) {return [+d["ECG1"]];});
      console.log(Time)
      console.log(ECG1)
      });

任何帮助都将不胜感激。

- Lcat91

---

你是否正在运行本地Web服务器？请参考例如这个教程。 - Lars Kotthoff

你在使用本地Web服务器时遇到了哪些问题？Ajax请求无法使用“file：”协议工作，因此需要一个Web服务器（无论是本地还是远程）。理想情况下，脚本和CSV文件都应该从同一台服务器上提供。 - nullability

我曾经遇到过同样的问题。请检查您是否提供了正确的文件路径？要打开 file:///，您应该使用本地服务器执行请求。首先尝试使用 Firefox 打开，因为它可以处理请求异常。请尽可能提供更多信息（例如）您的控制台日志和一些其他信息。 - divakar

如果您的目标是以最小化麻烦的方式运行本地Web服务器，请考虑使用浏览器扩展程序，例如[Web Server for Chrome]（https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en）。 - hbere

我在这里发布了一些解决方案。 - erdogant

Answer 1

这也让我困惑了（我也是一个d3的初学者）。

所以，由于某些原因，网页浏览器不喜欢你加载本地数据，可能是出于安全原因之类的考虑。为了解决这个问题，你需要运行一个本地 Web 服务器，这很容易实现。

在终端中，进入你的网站文档根目录（感谢@daixtr），然后输入：

python -m SimpleHTTPServer 8888 &

好的，现在只要那个终端窗口保持打开并运行，您的本地8888 Web服务器就会运行。

因此，在我的情况下，我正在工作的网页最初被称为

file://localhost/Users/hills/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html

当我在谷歌浏览器中打开它时。为了在本地web服务器上打开我的页面，我只需在chrome搜索栏中输入：

http://localhost:8888/Desktop/website/visualizing-us-bls-data-inflation-and-prices.html

现在，读取CSV应该可以正常工作了。很奇怪，我知道。

- Hillary Sanders

---

我尝试了这个，结果在控制台中出现了以下错误：XMLHttpRequest无法加载http://localhost:8888/test.csv。请求的资源上没有'Access-Control-Allow-Origin'头。因此，来自'null'的访问不被允许。你也遇到过这个问题吗？ - David Yang

和你的评论遇到了同样的问题，只需像.csv一样请求相同来源的html页面。因此，不要在Windows资源管理器中从文件中打开.html，而是在浏览器中请求它：http://localhost:8888/Desktop/website/mypage.html。 - Dimitar Nikovski

在Python 3中，SimpleHTTPServer已被重命名为http.server。 - Matt Stobbs

我还要补充一点，您可以访问终端并将文件拖放进去，按回车键，会出现错误，然后再复制Python代码。 - needshelp

Answer 2

此外，我正在学习D3用于学校作业。我试图运行这个简单的D3示例：https://gist.github.com/d3noob/b3ff6ae1c120eea654b5。

我遇到了与OP相同的问题，即使用Chrome浏览器加载数据。我猜希拉里·桑德斯（Hillary Sanders）上面发布的好的解决方法是关于Python 2.X的。

我的答案是关于Python 3.X [OS：Ubuntu 16x]：

在您的项目根目录中打开终端窗口，然后运行： python3 -m http.server 它默认会在8000端口上提供HTTP服务，除非该端口已被占用，在这种情况下，要打开另一个端口（例如7800），请运行： python3 -m http.server 7800 然后，在Chrome浏览器地址栏中键入： localhost:8000 以上对我有用，因为我只有index.html页面在我的根文件夹中。如果您有一个具有不同名称的HTML页面，请键入该本地HTML页面的完整路径，它也应该可以工作。并且，您应该能够看到从链接数据集创建的图表（必须位于类似data/data.csv的文件夹中）。希望这可以帮助您。 :-)

- NinaNeu

Answer 3

对于使用内置的Python Web服务器、仍然遇到问题的用户，请务必记住并确保在您认为是文档根目录的正确路径下运行“python -m SimpleHTTPServer 8888”调用。也就是说，您不能随意运行“python -m SimpleHTTPServer 8888”。您必须实际上“cd /to/correct/path/”，包含您的index.html或data.tsv，然后从那里运行“python -m SimpleHTTPServer 8888”。

- daparic

---

这是一个很好的观点。我将其添加到主要答案中，以便人们可以看到。 - Hillary Sanders

Answer 4

使用Firefox，我不知道Chrome想要实现什么。

- user3007270

---

想知道为什么Chrome无法做到这一点的原因。 - KCK

我在 Firefox 上也遇到了同样的 CORS 问题。 - Deeksha