javascript - 将 nodejs/express 应用程序中的 json 文件加载到 d3

Question

我有一个 express 应用程序，我想将文件夹 public 中的 json 数据加载到 d3(版本 4)中。

我的文件夹结构是这样的:

public
|-myData.json
view
|-index.jade
app.js

我要用d3加载的json数据:

{
  {
    "name": "Maria",
    "age": 30
  }, {
    "name": "Fred",
    "age": 50
  }, {
    "name": "Francis",
    "age": 12
  }
}

这是我的 index.jade 文件:

extends layout
block content
  script(src='javascripts/jquery-3.1.1.min.js')
  script(src='javascripts/d3.min.js')
  script.
    $(document).ready(function() {
      d3.json("myData.json", function(data) {
        console.log("d ", data);
      });
    });

在 app.js 中我说我想提供静态文件:

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static('public'));

在控制台中它总是说:d null

更新: 我现在将路径更改为

"d3.json("../myData.json", function(data)"

查看网络选项卡，我可以看到它已成功加载文件。但是在控制台中它仍然会打印“null”

更新 2: 这是因为我的 JSON - 数据无效。 ^^

{
    "content": [

        {
            "name": "Maria",
            "age": 30
        }, {
            "name": "Fred",
            "age": 50
        }, {
            "name": "Francis",
            "age": 12
        }
    ]
}

Answer 1

确保您指向 d3.json 的第一个参数中的 public 文件夹 相对于 express 静态托管文件的位置.

...
d3.json("../myData.json", function(data) {
        console.log("d ", data);
      });
    });

更新:已编辑正确目录引用的答案。还要确保 myData.json 是一个有效的 json 文件! :)