在dc.js中加载地图的问题

时间:2016-05-13 07:50:10

标签: javascript json d3.js dc.js crossfilter

我在dc.js中加载地图时出现问题,我的代码看起来很棒,而其他图表正在加载正常。请看看,让我知道我做错了什么,我已经看了4天,尝试了不同调整甚至更改了投影,但它没有加载。但是当我使用相同的方法(函数)加载美国GeoJson地图时,地图加载正常。我用python bokeh尝试了我的地图,它没有任何问题地加载了地图。

以下是我的代码

    queue()
    .defer(d3.json, "/censusdata/perdistrict")
    .defer(d3.json, "static/geojson/ ug-all.geo.json")
    .await(makeGraphs);

function makeGraphs(error, censusJson, districtsJson) {
    var populationCensusProject = censusJson;

    var ndx = crossfilter(populationCensusProject);
    var numberFormat = d3.format(".2f");
    //assigning dc.js dimensions
    var urbanTypeDim = ndx.dimension(function(d) {return d["urban"];});
    var idTypeDim = ndx.dimension(function(d){return d["_id"];});
    var ruralTypeDim =  ndx.dimension(function(d) {return d["rural"];});
    var householdDim =  ndx.dimension(function(d) {return d["household"];});
    var regionDim = ndx.dimension(function(d){return d["region"];});
    var nonehouseholdDim =  ndx.dimension(function(d) {return d["household"];});
    var maleDim = ndx.dimension(function(d){return d["male"];});
    var femaleDim = ndx.dimension(function(d){return d["females"];});
    var districtDim = ndx.dimension(function(d) {return d["district"];});
    var dictrict = ndx.dimension(function(d) {return d["district"];});
    var totalpopulationDim = ndx.dimension(function(d){return d["total"];});

    //assigning data groups
    var all = ndx.groupAll();
    var numPopulationByHousehold = householdDim.group();
    var numPopulationByNonHousehold = nonehouseholdDim.group();
    var numPopulationByRegion = regionDim.group();
    var numPopulationByRural = ruralTypeDim.group();
    var numPopulationByUrban = urbanTypeDim.group();
    var numPopulationByMale = maleDim.group();
    var numPopulationByFemale = femaleDim.group();
    var totalpopulationByDist = districtDim.group().reduceSum(function(d){
        return d["total"];
    });
    var totalpopulationByRegion = regionDim.group().reduceSum(function(d){
        return d["total"];
    });
    var totalpopulation = ndx.groupAll().reduceSum(function(d) {return d["total"];});
    var max_districts = totalpopulationByDist.top(1)[0].value;

    var mwidth=960
    var mheight=500

    //defining our charts from dc.js
    var pchart = dc.pieChart("#donut-chart");
    var percentageLevelChart = dc.barChart("#percentage-type-row-chart");
    var householdLevelChart = dc.rowChart("#district-level-row-chart");
    var ugChart = dc.geoChoroplethChart("#ug-chart");
    var districtname = dc.numberDisplay("#district-name-nd");
    var totalpopulationND = dc.numberDisplay("#total-population-nd");

    //passing charts all necessary parameters

    districtname
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d){return d;})
        .group(all);

    totalpopulationND
        .formatNumber(d3.format("d"))
        .valueAccessor(function(d){return d; })
        .group(totalpopulation)
        .formatNumber(d3.format(".3s"));

    pchart
        .height(220)
        //.width(350)
        .radius(90)
        .innerRadius(40)
        .transitionDuration(1000)
        .dimension(regionDim)
        .group(totalpopulationByRegion);

    householdLevelChart
        .width(300)
        .height(250)
        .dimension(regionDim)
        .group(totalpopulationByRegion)
        .xAxis().ticks(4);

    percentageLevelChart
        .width(760)
        .height(450)
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal)
        .brushOn(true)
        .yAxisLabel("This is the total population")
        .dimension(idTypeDim)
        .group(totalpopulationByDist)
        .on('pretransition', function(chart){
            chart.selectAll("rect.bar").on("click", function(d){
                console.log('click');
                chart.filter(null)
                    .filter(d.data.key)
                    .redrawGroup();
            });
        });

    ugChart.width(960)
        .height(500)
        .dimension(districtDim)
        .group(totalpopulationByDist)
        .colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
        .colorDomain([0, max_districts])
        .overlayGeoJson(districtsJson["features"], "district", function (d) {
        return d.properties.name;
    })
    .projection(d3.geo.conicEqualArea()
                .scale(600)
                .translate([mwidth / 2, mheight / 1.5]))
    .title(function (p) {
        return "district: " + p["key"]
                + "\n"
                + "Total Donations: " + Math.round(p["total"]) ;
    })

    dc.renderAll();
};

指向ug-all.geo.json here

的链接

链接censusdata perdistrict json是here

任何帮助都将受到高度赞赏。

0 个答案:

没有答案