Question

我希望能够从大型json文件更新使用d3制作的图表上的数据和可视化。数据来自美国农业部的营养数据库。 json文件来自这里：http://ashleyw.co.uk/project/food-nutrient-database，它非常大（特别是30MB）。加载它是一件麻烦事。 Notepad ++将它全部加载到（1）行（大约一分钟后），记事本（在大约20秒内）加载它（跨多行）格式不佳。是否有可能有效地使用大型的Json数据库？它会导致浏览器崩溃或导致某种加载延迟吗？

Answer 1

正如我上面提到的，我的建议是预处理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');
    })
})

如何在D3.js中使用大型Json文件

1 个答案: