D3.js中的嵌套JSON加载

Question

What is the proper way to do nested loading of JSON files in D3.js. This is the code im trying to use. The problem im having is that d.dataset.toString() return the error 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();
        });
    });

--- Updated non working example with Queue.js, the problem I now have is that "owner" is undefined.

    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();
            });
        });
    });

Answer 1

So i finally got it working. Look at the code below for a working example and read this for more details.

        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();
                });
            }
        })