數據地圖顯示印度的小尺寸地圖

Question

嗨我想創建一個帶有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' 
}); 

https://jsfiddle.net/bxp9e9j1/

Answer 1

你需要告訴哪裏是中心和投影。添加到您的代碼：

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', 

，給你一個圓形地球儀類型的平面地圖intead。

希望得到這個幫助