npmでインストールされたd3ライブラリでjsonファイルがロードされない

Question

dpmをnpmでインストールしました。 package.jsonでは、依存関係を示します"d3": "^4.11.0" version,。

私は次のコードを使用して、単純なJSONファイルをロードしようとした：

const d3 = require('d3') 

d3.json('jsonfile.json', (err, data) => { 
    if (err) { 
    console.log(err) 
    } 
    data.keys.map((t) => { 
    console.log(t) 
    }) 
}) 

をしかし、私はこのエラーを得た：

SyntaxError: Unexpected token T in JSON at position 0 

JSONファイルが実際にokです。このツールを使用して確認しました：https://codebeautify.org/jsonvalidator私はこの行const d3 = require('d3')を削除し、HTMLファイル内のスクリプトを直接挿入する際

はしかし、：3.5.5バージョンを使用して...

<script type='text/javascript' src='/js/d3.min.js'></script> 

、JSONファイルがロードされました。

ローカルファイルをロードするためにd3バージョン^4.11.0に新しい何かがありますか？

Answer 1

あなたは完全なURLでJSONをロードする必要がノードアプリとしてあなたのコードを実行する場合：

const d3 = require('d3'); 
//use full url to where the json file is 
d3.json('http://localhost:8080/jsonfile.json', (err, data) => { 
    if (err) { 
    console.log(err) 
    } 
    data.keys.map((t) => { 
    console.log(t) 
    }) 
}); 

ノード・アプリケーションとしてコードを実行して、ディスクからファイルをロードしたい場合あなたのコードは、ブラウザで実行されていますが、依存関係の管理などのNPMを使用したい、あなたは（古い方法）またはWebPACKの（より良いrequirejsを使用することができますが、もう少し複雑に学ぶことをした場合

fs = require('fs'); 
const readFile = (file,encoding) => 
    new Promise(
    (resolve,reject)=> 
     fs.readFile(
     file 
     ,encoding 
     ,(err,data) => { 
      if(err !== null){ 
      reject(err);return; 
      } 
      resolve(data); 
     } 
    ) 
    ) 
; 

readFile("./static/jsonfile.json",'utf8') 
.then(
    data => 
    data.toString() 
).then(
    text => 
    console.log("Got file content:\n",text) 
    ,err => 
    console.error("Failed to load file:",err) 
); 

：そうのようなファイルを読み込むことができます設定してください）。ブラウザでコードを使用している場合は、const d3 = require('d3');でエラーが発生しないと思います。