我在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
任何帮助都将受到高度赞赏。