web-dev-qa-db-ja.com

d3のcsvファイルからデータをインポートできません

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)
      });

どんな助けでも大歓迎です。

javascriptcsvd3.jsimport-from-csv
13
Lcat91

これも私を混乱させました（私はd3の初心者でもあります）。

したがって、何らかの理由で、おそらくセキュリティ上の理由などで、Webブラウザはローカルデータのロードに満足していません。とにかく、これを回避するには、ローカルWebサーバーを実行する必要があります。これは簡単。

ターミナルで、Webサイトのドキュメントルートにcd-を実行した後（@daixtrに感謝）、次のように入力します。

python -m SimpleHTTPServer 8888 &

さて、そのターミナルウィンドウが開いて実行されている限り、ローカルの8888Webサーバーが実行されます。

だから私の場合、もともと私が取り組んでいたウェブページは呼ばれていました

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での読み取りが機能するはずです。奇妙な、私は知っています。

25
Hillary Sanders

組み込みのpython webserverを使用していて、まだ問題が発生している場合は、覚えておいてください。「python -m SimpleHTTPServer8888」呼び出しを正しいパスで実行するようにしてください。 DocumentRootになります。つまり、「python -m SimpleHTTPServer 8888」をどこでも実行することはできません。実際には、index.htmlまたはdata.tsvを含む「cd/to/correct/path /」を実行してから、「python」を実行する必要があります。 -m SimpleHTTPServer 8888 '。

6
typelogic

Firefoxを使用し、idk Chromeが達成しようとしていること

2
user3007270

また、学校の仕事のためにD3を学ぶだけです。私はこの単純なD3の例を実行しようとしていました： https://Gist.github.com/d3noob/b3ff6ae1c120eea654b5

OP reと同じ問題がありました：Chromeブラウザを使用してデータをロードします。上に投稿したHillarySandersがre：Python 2.X。

私の答えはreです：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のようなフォルダーにある必要があります）のデータセットから作成されたグラフを見ることができるはずです。これがお役に立てば幸いです。 :-)

0
NinaNeu