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

Posted 2023-02-22

【中文标题】无法从 d3 中的 csv 文件导入数据

【英文标题】：Cannot import data from csv file in d3

【发布时间】：2014-01-27 04:51:48

【问题描述】：

我刚刚学习 d3，我正在尝试从 CSV 文件导入数据，但我不断收到错误消息“XMLHttpRequest cannot load file:///Users/Laura/Desktop/SampleECG.csv. Cross origin请求仅支持 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)
      );

任何帮助将不胜感激。

【问题讨论】：

您在运行本地网络服务器吗？参见例如this tutorial.

您在使用本地 Web 服务器时遇到了哪些问题？ Ajax 请求不适用于file: 协议，因此需要一个Web 服务器（无论它是否在本地）。理想情况下，将从同一服务器同时提供脚本和 csv 文件。

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

如果您的目标是轻松运行本地 Web 服务器，请考虑使用浏览器扩展程序，例如 Web Server for Chrome。

我通过here发布了一些解决方案

【参考方案1】：

另外，只是为了学业而学习 D3。我试图运行这个简单的 D3 示例： https://gist.github.com/d3noob/b3ff6ae1c120eea654b5

我遇到了和 OP re 一样的问题：使用 Chrome 浏览器加载数据。我敢打赌，希拉里·桑德斯在上面发布的最佳解决方案是：Python 2.X。

我的回答是：Python 3.X [操作系统：Ubuntu 16x]：

在项目的根目录中打开一个终端窗口，然后运行：

python3 -m http.server

默认情况下它将在端口 8000 上提供 HTTP，除非它已经被占用，在这种情况下打开另一个端口，例如7800，运行：

python3 -m http.server 7800

然后，在您的 Chrome 浏览器地址栏输入：

localhost:8000

以上内容对我有用，因为我的根文件夹中只有一个 index.html 页面。如果您有一个名称不同的 HTML 页面，请键入该本地 HTML 页面的完整路径，它也应该可以工作。而且，您应该能够看到从我的链接中的数据集创建的图表（必须在 data/data.csv 之类的文件夹中）。我希望这有帮助。 :-)

【参考方案2】：

使用 Firefox，了解 Chrome 尝试完成的任务

【讨论】：

想知道chrome无法做到这一点的原因

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

【参考方案3】：

这也让我很困惑（我也是 d3 初学者）。

因此，出于某种原因，Web 浏览器对您加载本地数据不满意，可能是出于安全原因或其他原因。无论如何，要解决这个问题，您必须运行本地 Web 服务器。这很容易。

在您的终端中，在 cd-ing 到您网站的文档根目录之后（感谢 @daixtr），输入：

python -m SimpleHTTPServer 8888 &

好的，现在只要该终端窗口打开并运行，您的本地 8888 网络服务器就会运行。

所以在我的情况下，最初我正在处理的网页被称为

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

当我在 chrome 中打开它时。要在本地网络服务器上打开我的页面，我只需输入（进入 chrome 搜索栏）：

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

现在，读取 CSV 文件应该可以了。很奇怪，我知道。

【讨论】：

我试过这个并最终在控制台中得到这个错误：XMLHttpRequest cannot load localhost:8888/test.csv。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。你也遇到过这种情况吗？

遇到与您的评论相同的问题，只需以与 .csv 相同的方式请求 html 页面，以便它们具有相同的来源。因此，不要在 Windows 资源管理器中从文件中打开 .html，而是在浏览器中请求它：http://localhost:8888/Desktop/website/mypage.html

SimpleHTTPServer 在 python 3 中已重命名为 http.server

我还要补充一点，您可以访问终端并将文件拖放到其中，按 Enter，出现错误，然后复制 python 代码。

【参考方案4】：

对于那些使用内置 python 网络服务器但仍然遇到问题的人，请记住并确保在您认为是 DocumentRoot 的正确路径上运行“python -m SimpleHTTPServer 8888”调用。也就是说，您不能只在任何地方运行“python -m SimpleHTTPServer 8888”。您实际上必须“cd /to/correct/path/”包含您的 index.html 或 data.tsv，然后从那里运行“python -m SimpleHTTPServer 8888”。

【讨论】：

这很好。我将其添加到主要答案中，以便人们看到。