数据地图显示了印度的小尺寸地图 [英] Datamaps are showing small size map of India
本文介绍了数据地图显示了印度的小尺寸地图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好我正在尝试使用datamap和d3 js创建地图。但它的反面显示地图,尺寸非常小。我该如何解决这个问题。共享JS小提琴。
Hi I am trying to create a map with datamap and d3 js. But its showing map in reverse and very small in size. How can I resolve this. Sharing the JS fiddle for the same.
<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'
});
https://jsfiddle.net/bxp9e9j1/
推荐答案
你需要告诉中心和中心在哪里投影。将其添加到您的代码中:
You need to tell where is the center and the projection. Add this to your code:
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
Center of India: 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};
}
});
提示:您可以将投影类型更改为: Mercator
Tip: you can change Projection type to: Mercator
projection: 'mercator',
给你一个圆形地球仪类型的平面地图。
that give you a flat map intead of rounded globe type.
希望这个帮助
这篇关于数据地图显示了印度的小尺寸地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文