D3卡在队列中

Question

Hello Iam loading 3 different csv with a d3.queue. But when I try to display my page it never call the function after loading the data.

data.js

function process(d){
       var processed = {
            code : d["Institution code (UKPRN)"],
            name : d["Institution name"],
            iSorte : d["Institution sort order"],
            nbAssess : d["Unit of assessment number"],
            naAsses: d["Unit of assessment name"],
            subLetter : d["Multiple submission letter"],
            subName : d["Multiple subimission name"],
            jSub : d["Joint submission"],
            profile : d["Profile"],
            fte : d["FTE Category A staff submitted"],
            one: d["1*"],
            two: d["2*"],
            three: d["3*"],
            four: d["4*"],
            unclassified: d["unclassified"]
                }
                return processed;
        }


function dataManager(){





    var dmObj = {}; // main object


    var ref14data;
    var townsCSV;
    var refUniversitiesByUKPRN;
    var learningProviders;
    var heriotWattCS;
    var dataset =[];
    // ---- PUBLIC API

    // function loading json data from url
    // parameters:
    //      - url, url of data in string format
    //      - callbackError, callback in case of error
    //      - callbackSuccess, callback if data loads normally
    // returns:
    //      - Nothing



    // function returning filtered data: money per year
    // parameters:
    //      - None
    // returns:
    //      - nestedData, data with following format:
    //          [{"key": year, "value": money}, {...}, ...]
    dmObj.getByName = function(){

        // using nest function from d3 to "classify" data into years
        // then rollup to change array of values into sum of money
        var nestedData = d3.nest()
            .key(function(d){return d.name;})
            .sortKeys(d3.ascending)
            .rollup(function(values){return values.length;})
            .entries(dataset);

        console.log("databyname",nestedData);

        return nestedData;
    }

    // function returning filtered data: money per area
    // parameters:
    //      - None
    // returns:
    //      - nestedData, data with following format:
    //          [{"key": area, "value": money}, {...}, ...]
    dmObj.getArea = function(key){

        var nestedData = d3.nest()
            .key(function (d) {return d.name;})
            .key(function (d) {return d.naAsses;})
            .rollup(function(values) {return values.length})
            .map(dataset);



        return nestedData["$"+key];
    }

    dmObj.loadAllData = function (url1,url2,url3) {
        d3.queue()
            .defer(d3.csv, url1)
            .defer(d3.csv, url2)
            .defer(d3.csv, url3)
            .await(processus);

        function processus(error,data1, data2, data3) {
            ref14data = data1;
            townsCSV = data2;
            learningProviders = data3;


            //Create master table
            combineLPwithTownData(learningProviders, townsCSV);
            console.log('ref data ',learningProviders);
            console.log('town',townsCSV);

            combineREFwithLPdata(ref14data, learningProviders);


            //Just consider "overall" assessments
            ref14data = ref14data.filter(function (e) { return e.Profile === "Overall" })

            console.log('ref', ref14data);
            return ref14data;
        }
    }

    dmObj.getHierarchy = function(){
        var hierarchyJSON = createJSONhierarchy(ref14data, "root",
            ["Country","County", "Institution name"])

        return hierarchyJSON;
    }

    function combineLPwithTownData(learningProviders, townsCSV){
        // For each learning provider university - add learning provider entry as field
        // 'lp' in relevant REF14 table entry
        learningProviders.forEach(addTownDetailsToProvider);

        function addTownDetailsToProvider(provider){
            provider.townInfo = townsCSV.find(function(townDetails){
                return townDetails.Town === provider["Town-lc"];
            })
        }
    }



    function combineREFwithLPdata(ref14data, learningProviders){
        // For each learning provider university - add learning provider entry as field
        // 'lp' in relevant REF14 table entry
        ref14data.forEach(addLP);

        function addLP(refEntry){
            refEntry.lp = learningProviders.find(function(provider){
                return provider.UKPRN == refEntry["Institution code (UKPRN)"]
            });
            if (refEntry.lp){
                refEntry.County = refEntry.lp.townInfo.County;
                refEntry.Country = refEntry.lp.townInfo.Country;
            }
        }
    }




        return dmObj; // returning the main object
}

main.js

var dataManager = {};

function startApplication(){

    dataManager = dataManager();

    dataManager.loadAllData("csvFiles/REF2014_Results.csv","csvFiles/Towns_List.csv","csvFiles/learning-providers-plus.csv",
        function(error){ // to call in case of error
            console.log("Error");
            console.log(error);
        },
        function(){ // to call if everything ok
            makePage();
        });
}

function makePage(){
    console.log("etstests");
    var dash = d3.select('div#dashboard');

    // EDIT PAGE STRUCTURE
    dash.append('div')
        .attr('id', 'bar1') // for renderer generation
        .classed("barchart", true) // for styling
            .append("h3").text("Number of submission per Univsersity");

I putted a console.log to see if it enter but never see that console.log.

Is a d3 queue an endless loop ? If yes how can I return my data value after load it.

Answer 1

The problem is the loadAllData signature is like below

dmObj.loadAllData = function (url1,url2,url3)

and you are calling like this:

dataManager.loadAllData("URL 1","URL 2","URL 3",
        function(error){ // to call in case of error
        console.log("Error");
        console.log(error);
    },
    function(){ // to call if everything ok
        makePage();
    });

So success and error function will never be called as its not wired accordingly in the loadAllData

So it should be

 dmObj.loadAllData = function (url1,url2,url3, callbackError, callBackSuccess) {
        d3.queue()
            .defer(d3.csv, url1)
            .defer(d3.csv, url2)
            .defer(d3.csv, url3)
            .await(processus);

        function processus(error,data1, data2, data3) {
            if(error){
               return callbackError(error);
            } 
            callBackSuccess(data1, data2, data3);//make the success callback

            ref14data = data1;
            townsCSV = data2;
            learningProviders = data3;