我需要将数据图世界图添加到" maps-world" div元素中的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名为Choropleth的例子,所以预计它会正常工作。 任何人都可以帮助我。
答案 0 :(得分:1)
我通过按以下顺序包含最新版本的库来修复此问题。
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="datamaps.world.min.js"></script>
把它放在我的机器上,它显示了带有区域和几个弧形和气泡的地图。
希望这有帮助。