Question

在D3.js中嵌套加载JSON文件的正确方法是什么这是我试图使用的代码。我遇到的问题是d.dataset.toString（）返回错误无法读取未定义的属性'toString'。

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更新了非工作示例，我现在遇到的问题是“所有者”未定义。

    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

所以我终于开始工作了。请查看下面的代码以获取工作示例，并阅读this以获取更多详细信息。

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

D3.js中的嵌套JSON加载

1 个答案: