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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21006647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:48:47  来源:igfitidea点击:

Cannot import data from csv file in d3

javascriptcsvd3.jsimport-from-csv

提问by Lcat91

I'm just learning d3, and I'm attempting to import data from a CSV file, but I keep getting the error "XMLHttpRequest cannot load file:///Users/Laura/Desktop/SampleECG.csv. Cross origin requests are only supported for HTTP. ". I've searched for how to fix this error and have ran it on a local web server, but I haven't found a solution that works for d3.v2.js. Here's a sample of the code:

我只是在学习 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)
      });

Any help will be much appreciated.

任何帮助都感激不尽。

回答by Hillary Sanders

This confused me too (I am also a d3 beginner).

这也让我感到困惑(我也是 d3 初学者)。

So, for some reason, web browsers are not happy about you loading local data, probably for security reasons or something. Anyways, to get around this, you have to run a local web server. This is easy.

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

In your terminal, after cd-ing to your website's document root (thanks @daixtr), type:

在您的终端中,在cd访问您网站的文档根目录后(感谢 @daixtr),输入:

python -m SimpleHTTPServer 8888 &

Okay, now as long as that terminal window is open and running, your local 8888 web server will be running.

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

So in my case, originally the web page I was working on was called

所以就我而言,最初我正在处理的网页被称为

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

When I opened it in chrome. To open up my page on my local web server, I just typed (into the chrome search bar):

当我用 chrome 打开它时。要在本地 Web 服务器上打开我的页面,我只需输入(进入 chrome 搜索栏):

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

Now, reading in CSVs should work. Weird, I know.

现在,在 CSV 中读取应该可以工作。很奇怪,我知道。

回答by typelogic

To those using built-in python webserver and who are still experiencing issues, do REMEMBER and make sure that you run the "python -m SimpleHTTPServer 8888" invocation at the correct path of which you consider to be your DocumentRoot. That is, you cannot just run 'python -m SimpleHTTPServer 8888' anywhere. You have to actually 'cd /to/correct/path/' containing your index.html or data.tsv and then from there run 'python -m SimpleHTTPServer 8888'.

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

回答by user3007270

Use Firefox, idk what Chrome tries to accomplish

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

回答by NinaNeu

Also, just learning D3 for school work. I was trying to run this simple D3 example: https://gist.github.com/d3noob/b3ff6ae1c120eea654b5

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

I had the same problem as OP re: loading data using Chrome browser. I bet the great solution Hillary Sanders posted above was re: Python 2.X.

我遇到了与 OP re 相同的问题:使用 Chrome 浏览器加载数据。我敢打赌,希拉里·桑德斯 (Hillary Sanders) 上面发布的出色解决方案是 re: Python 2.X

My answer is re: Python 3.X[OS: Ubuntu 16x]:

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

Open a terminal window within the root directory of your project, then run:

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

python3 -m http.server

python3 -m http.server

It will serve HTTP on port 8000 by default unless it is already taken, in that case to open another port, e.g. 7800, run:

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

python3 -m http.server 7800

python3 -m http.server 7800

Then, on your Chrome browser address bar type:

然后,在您的 Chrome 浏览器地址栏输入:

localhost:8000

localhost:8000

The above worked for me because I only had an index.html page in my root folder. In case, you have a HTML page with a different name, type the whole path to that local HTML page and it should work also. And, you should be able to see the graph created from the data set in my link (that must be in a folder like data/data.csv). I hope this helps. :-)

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