使用 npm 安装的 d3 库不加载 json 文件

Question

我刚刚使用 npm 安装了 d3。在 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文件其实是可以的。我使用此工具进行了验证：https://codebeautify.org/jsonvalidator。

但是，当我删除这一行 const d3 = require('d3') 并将脚本直接插入 HTML 文件时：

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

...使用3.5.5版本，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)
  })
});

如果您想将代码作为节点应用程序运行并从磁盘加载文件，您可以像这样加载文件：

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

如果您的代码在浏览器中运行，但您想使用 npm 作为依赖管理，那么您可以使用 requirejs（旧方式）或 webpack（更好，但学习和设置有点复杂）。如果您在浏览器中使用您的代码，我想知道您如何在const d3 = require('d3'); 上没有收到错误消息。