將nodejs/express應用程序中的json文件加載到d3中

我有一個快速應用程序，我想從文件夾public將json-data加載到d3（版本4）中。將nodejs/express應用程序中的json文件加載到d3中

我的文件夾結構如下所示：

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 
     } 
    ] 
}

來源

2016-09-25 thadeuszlay

你在網絡標籤中看到什麼？ – SLaks

「myData.json xhr \t d3.min.js：6 \t 1.2 KB \t 40 ms \t」。它不能被加載。它沒有被發現。我在Chrome上激活了CORS。 @SLaks – thadeuszlay

確保您指向public文件夾中的d3.json的第一個參數就到表達的是靜態託管的文件。

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

更新：修改瞭解決目錄參考的答案。另外請確保myData.json是一個有效的json文件！ :)

來源

2016-09-25 21:26:14 Oberon

我也試過。但事實並非如此。如果我這樣做，它會在控制檯中說：「d3.min.js：6 GET http：// localhost：3000/public/myData.json 404」 – thadeuszlay

啊，也許是這行'app.use（express .static（path.join（__ dirname，'public'）））; （express.static（'public'））;' 嘗試將其更改爲'app.use（express.static（path.join（__ dirname，'public'），{index：'index.jade'}} ））;' – Oberon

沒有。在它已經調用index.jade之前。所以，它也可以在之前找到它。它也可以加載json文件。但不知何故d3沒有注意到它。：/ – thadeuszlay

將nodejs/express應用程序中的json文件加載到d3中

回答

相關問題