Datamaps показывают карту небольшого размера Индии

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

, которые дают вам плоскую карту с закругленным типом земного шара.

Надеемся, что эта помощь