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

Question

我只是在学习d3,我正在尝试从CSV文件导入数据,但我不断收到错误"XMLHttpRequest无法加载文件:///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)
      });

任何帮助都感激不尽.

Answer 1

这也让我很困惑(我也是d3初学者).

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

在您的终端中,在cd您的网站的文档根目录之后(感谢@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应该有效.很奇怪,我知道.

Answer 2

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

Answer 3

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

我遇到了与OP re：使用Chrome浏览器加载数据相同的问题。我敢打赌 Hillary Sanders 上面发布的伟大解决方案是 re: 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 等文件夹中）。我希望这有帮助。:-)