D3.js中的嵌套JSON加载

Nested JSON loadings in D3.js

本文关键字:JSON 加载 嵌套 js D3      更新时间:2023-09-26

在D3.js中嵌套加载JSON文件的正确方法是什么?这是我试图使用的代码。我遇到的问题是d.p dataset.toString()返回错误Cannot read property 'toString' of undefined。

main.json

[
    {
        "name" : "A-Module",
        "file" : "a.json"
    },
    {
        "name" : "B-Module",
        "file" : "b.json"
    }
]

a.json

[
    {
        "owner" : "A-Module",
        "dataset" : [1,2,3,4,5,6]
    }
]

b.json

[
    {
        "owner" : "B-Module",
        "dataset" : [7,8,9,10]
    }
]

    var width = 500,
        height = 500,
        svg;
    svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
    d3.json("main.json", function(metrics){
        for (var i=0; i<metrics.length; i++){
            var path = metrics[i].file;
            d3.json(path,function(data){
                for(var j=0; j<metrics.length;j++){
                    var owner = data.owner;
                    var metricName = metrics[j].name;
                    if (owner === metricName){
                        metrics[j].dataset = data.dataset;
                    }
                }
            });
        }
        svg.selectAll("g")
        .data(metrics)
        .enter()
        .append("g")
        .append("text")
        .text(function(d,i){
            return d.dataset.toString();
        });
    });

—更新了Queue.js的非工作示例,我现在遇到的问题是"owner"未定义。

    var width = 500,
        height = 500,
        svg;
    svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
    d3.json("main.json", function(metrics){
        var tasks = [],
            q = queue(1),
            path;
        for (var i=0; i<metrics.length; i++){
            path = metrics[i].file;
            tasks[i] = function(callback) {
                d3.json(path,function(data){
                    for(var j=0; j<metrics.length;j++){
                        var owner = data.owner;
                        var metricName = metrics[j].name;
                        console.log("1",owner,"2", metricName)
                        if (owner === metricName){
                            metrics[j].dataset = data.dataset;
                            callback(null,data);
                            console.log("THIS SHOULD NEVER PRINT");
                            break;
                        }
                    }
                });
            };
        }
        tasks.forEach(function(t) { q.defer(t); });
        q.awaitAll(function(error, results) { 
            svg.selectAll("g")
            .data(metrics)
            .enter()
            .append("g")
            .append("text")
            .text(function(d,i){
                return d.dataset.toString();
            });
        });
    });

所以我终于让它工作了。查看下面的示例代码,了解更多细节。

        var width = 500,
            height = 500,
            svg;
        svg = d3.select("body").append("svg").attr("width", width).attr("height",height);
        d3.json("main.json", function(metrics){
            var tasks = [],
                q = queue(),
                paths = [];
            for (var i=0; i<metrics.length; i++){
                paths[i] = metrics[i].file;
            }
            paths.forEach(function(fileName){
                q.defer(function(callback) {
                    d3.json(fileName,function(data){ callback(null, data) });
                });
            });
            q.awaitAll(restOfCode)
            function restOfCode(err, results){
                //Add files into one big file and all the rest of my data bindings
                for(var j=0; j<results.length;j++){
                    for(var k=0; k<metrics.length;k++){
                        var owner = results[j][0].owner ;
                        var metricName = metrics[k].name;
                        if (owner === metricName){
                            metrics[k].dataset = results[j][0].dataset;
                        }
                    }
                }
                svg.selectAll("g")
                .data(metrics)
                .enter()
                .append("g")
                .append("text")
                .text(function(d,i){
                    return d.dataset.toString();
                });
            }
        })