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

Question

我有一个快速应用程序，我想从文件夹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

确保您指向public文件夹中的d3.json的第一个参数就到表达的是静态托管的文件。

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

更新：修改了解决目录参考的答案。另外请确保myData.json是一个有效的json文件！ :)