web-dev-qa-db-ja.com

d3.jsonを使用してローカルjsonファイルをインポートできない

d3.json()を使用してローカルの.jsonファイルをインポートしようとしました。

ファイル filename.jsonは、私のhtmlファイルと同じフォルダーに保存されます。

ただし、（json）パラメーターはnullです。

d3.json("filename.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    . . . 
}

私のコードは基本的にこれと同じです d3.js example

jsond3.js
38
Aleks G

ブラウザで実行している場合、- ローカルファイルをロードできません 。

しかし、コマンドラインでcdを使用してファイルを含むディレクトリにdevサーバーを実行するのは非常に簡単です。

python -m SimpleHTTPServer

（またはpython -m http.server using python 3）

ブラウザで、localhost:3000（または:8000またはコマンドラインに表示されるものすべて）。

以前は、d3の古いバージョンで動作していました。

var json = {"my": "json"};
d3.json(json, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
});
36
mb21

前の回答に追加すると、ほとんどのLinux/Macマシンが提供するHTTPサーバーを使用する方が簡単です（pythonをインストールするだけで）。

プロジェクトのルートで次のコマンドを実行します

python -m SimpleHTTPServer

次に、file://.....index.htmlにアクセスする代わりに、http://localhost:8080またはサーバーの実行によって提供されたポートでブラウザーを開きます。これにより、ブラウザはブロックされずにプロジェクト内のすべてのファイルを取得します。

8
bigsolom

http://bl.ocks.org/eyaler/10586116 このコードを参照してください。これはファイルから読み取り、グラフを作成しています。私も同じ問題を抱えていましたが、後で問題が使用しているjsonファイル（余分なコンマ）にあることがわかりました。ここでnullになっている場合は、このように、取得しているエラーを出力してみてください。

d3.json("filename.json", function(error, graph) {
  alert(error)
})

これはFirefoxで動作しています。chrome何らかの理由でエラーが出力されません。

6
Surendra Pratap

バージョンd3.v5では、次のように実行する必要があります

d3.json("file.json").then(function(data){ console.log(data)});

同様に、csvおよびその他のファイル形式。

詳細は https://github.com/d3/d3/blob/master/CHANGES.md で確認できます。

3
Manas Bhardwaj

readilyはできません。少なくともChromeではなく、おそらく他のブラウザーでもローカルファイルは読み取れません。

最も簡単な回避策は、JSONデータをスクリプトファイルに含めるだけで、d3.json呼び出して、渡したコールバック内のコードを保持します。

コードは次のようになります。

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
...
1
Kenny Evitt

私はこれを使用しました

d3.json("graph.json", function(error, xyz) {
    if (error) throw error;
    // the rest of my d3 graph code here
    }

変数xyzを使用してjsonファイルを参照できます。graphはローカルjsonファイルの名前です

0
Aakanksha Choudhary