[英]Datamaps are showing small size map of India
嗨,我正在尝试使用datamap和d3 js创建地图。 但是它的显示地图是反向的,并且尺寸很小。 我该如何解决。 共享JS小提琴也一样。
<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 src="https://raw.githubusercontent.com/markmarkoh/datamaps/master/dist/datamaps.ind.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
var map = new Datamap({
element: document.getElementById('container'),
scope: 'ind'
});
您需要告诉中心和投影在哪里。 将此添加到您的代码:
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};
}
印度中部:20.5937°N,78.9629°E
完整的代码:
var map = new Datamap({
element: document.getElementById('container'),
scope: 'ind',
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};
}
});
提示:您可以将投影类型更改为: 墨卡托
projection: 'mercator',
即可为您提供圆形地球仪类型的平面地图。
希望这个帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.