0
私はdjangoでデータマップを使用しようとしていましたが、複数のデータマップをロードしようとするとエラーが発生します。 Uncaught TypeError: Cannot read property 'world' of undefined どのjsファイルをどのスコープに使用するのかわかりません。現在、世界のために私のコードは1つのHTMLページに2つのデータマップをロードする方法は？
var series1 = {{ mapContainer.0|safe }} var dataset1 = {};
var onlyValues1 = series1.map(function(obj){ return obj[1]; });
var minValue1 = Math.min.apply(null, onlyValues1), maxValue1 = Math.max.apply(null, onlyValues1);
var paletteScale1 = d3.scale.linear()
.domain([minValue1,maxValue1])
.range(["#000000","#FF0000"]);
series1.forEach(function(item) {
var iso1 = item[0], value1 = item[1];
dataset1[iso1] = { numberOfThings: value1, fillColor: paletteScale1(value1) };
});
new Datamap({
element: document.getElementById('international_map'),
projection: 'mercator',
scope: 'world',
responsive: true,
fills: { defaultFill: '#F5F5F5' },
data: dataset1,
geographyConfig: {
borderColor: '#000000',
highlightBorderWidth: 2,
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
highlightBorderColor: '#fc0000',
popupTemplate: function(geo, data) {
if (!data) { return ; }
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
});
そして、私の国固有のコードである私は私のソースファイルとしてdatamaps.world.jsとdatamaps.ind.jsを使用しています。この
var series2 = {{ mapContainer.1|safe }}
var dataset2 = {};
var onlyValues2 = series2.map(function(obj){ return obj[1]; });
var minValue2 = Math.min.apply(null, onlyValues2), maxValue2 = Math.max.apply(null, onlyValues2);
var paletteScale2 = d3.scale.linear()
.domain([minValue2,maxValue2])
.range(["#000000","#FF0000"]);
series2.forEach(function(item) {
var iso2 = item[0], value2 = item[1];
dataset2[iso2] = { numberOfThings: value2, fillColor: paletteScale2(value2) };
});
new Datamap({
element: document.getElementById('national_map'),
fills: { defaultFill: '#F5F5F5' },
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([80, 25])
.scale(600)
.translate([element.offsetWidth/2, element.offsetHeight/2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
},
data: dataset2,
scope: 'ind',
responsive: true,
geographyConfig: {
borderColor: '#000000',
highlightBorderWidth: 2,
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
highlightBorderColor: '#fc0000',
popupTemplate: function(geo, data) {
if (!data) { return ; }
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
});
のようなものです。このための回避策はありますか？