2013-10-15 67 views
0

我希望能夠從大型json文件更新用d3製作的圖表上的數據和可視化效果。數據來自美國農業部的營養數據庫。 json文件來源於:http://ashleyw.co.uk/project/food-nutrient-database,它非常大(特別是30MB)。只需加載它是一件麻煩事。記事本++全部加載(1)行(大約一分鐘後),記事本(大約20秒)加載它(跨多行)格式不良。是否有可能有效地使用大型的Json數據庫?它會使瀏覽器崩潰還是導致某種加載滯後?如何在D3.js中使用大型Json文件

+0

你是絕對正確的,這將導致裝載的滯後性,但據我所知它不應該崩潰任何瀏覽器。你需要所有的數據嗎?即,您是否可以預處理它以刪除您不需要的任何信息? –

+0

我不需要所有的數據。但是,由於文件太大,我不知道如何有意剝去不需要的數據。只是以一種比較友好的閱讀格式查看它似乎是一種挑戰。我想要一個6600個對象的數組,每個對象嵌套大約75個對象。 – Yansee

+0

如果你使用D3,我假設你的Javascript Fu很強大。我的建議是安裝Node.js(如果你還沒有)並以這種方式處理文件。這很容易做到。讓我看看我能否拿出一個例子。 –

回答

2

正如我上面提到的,我的建議是預先處理JSON以刪除任何你不需要的東西。下面是Node.js中的一個示例腳本,它將讀取您正在使用的文件並吐出一個新文件,其中有很多內容被過濾掉。

在這個例子中,我忽略了除描述之外的所有領域,只包括關於維生素的信息。根數組中仍然應該有6600個元素。

從這個腳本生成的文件大約是5MB,而不是30MB

var fs = require('fs'); 

// open the file 
fs.readFile('./foods-2011-10-03.json','utf8',function(err,data){ 
    if (err) throw err; 
    var output = []; 

    // parse the file from a string into an object 
    data = JSON.parse(data); 

    // Loop through each element 
    data.forEach(function(d,i){ 
     // spit an example element into the console for inspection: 
     // if (i == 0) console.log(d); 

     // decide which parts of the object you'd like to keep 
     var element = { 
      description : d.description, 
      nutrients : [] 
     }; 

     // for example here I'm just keeping vitamins 
     d.nutrients.forEach(function(d,i){ 
      if (d.description.indexOf("Vitamin") == 0) element.nutrients.push(d); 
     }); 

     output.push(element); 
    }) 

    fs.writeFile('./foods-output.json', JSON.stringify(output), function(err){ 
     if (err) throw err; 
     console.log('ok'); 
    }) 
}) 
+0

請注意,如果文件較大,或者您有內存限制,您也可以考慮使用流來逐行過濾文件。在這裏看到這個答案:http://stackoverflow.com/questions/11874096/parse-large-json-file-in-nodejs –