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

Question

我有一个 express 应用程序，我想将文件夹 public 中的 json-data 加载到 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 文件！ :)