以下に示すように、div 要素の「maps-world」ID にデータマップ ワールド グラフを追加する必要があります。
<div id="maps-world" class="clearfix map" style="position: relative; width: 80%; max-height: 450px;"></div>
以下は、私が追加する依存関係です(すべての依存関係はローカルに作成されます)
<script src="js/twitter/maps/d3.v3.min.js"></script>
<script src="js/twitter/maps/datamaps.world.min.js"></script>
<script src="js/twitter/maps/topojson.v1.min.js"></script>
以下は、世界グラフを生成するために使用しているコードです。
var map = new Datamap({
scope: 'world',
element: document.getElementById('maps-world'),
projection: 'mercator',
height: 500,
fills: {
defaultFill: '#f0af0a',
lt50: 'rgba(0,244,244,0.9)',
gt50: 'red'
},
data: {
USA: {fillKey: 'lt50' },
RUS: {fillKey: 'lt50' },
CAN: {fillKey: 'lt50' },
BRA: {fillKey: 'gt50' },
ARG: {fillKey: 'gt50'},
COL: {fillKey: 'gt50' },
AUS: {fillKey: 'gt50' },
ZAF: {fillKey: 'gt50' },
MAD: {fillKey: 'gt50' }
}
})
map.arc([
{
origin: {
latitude: 40.639722,
longitude: 73.778889
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
},
{
origin: {
latitude: 30.194444,
longitude: -97.67
},
destination: {
latitude: 25.793333,
longitude: -0.290556
}
}
], {strokeWidth: 2});
map.bubbles([
{name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
{name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
{name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
], {
popupTemplate: function(geo, data) {
return "<div class='hoverinfo'>It is " + data.name + "</div>";
}
});
コンソールに次のエラーが表示されます。 データマップが定義されていません
コロプレスという名前のdatamap-github-pageで与えられた例だったので、うまく動作するはずでした。これについて私を助けることができる体はありますか?