Бангалор GeoJSON карта с d3 JS

Am пытается использовать GeoJSON файл Бангалора с 8 зон (особенности) в ней с помощью d3.jsБангалор GeoJSON карта с d3 JS

карта не показывает правильно. Что здесь не так. ??

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>D3: expr maps</title> 
 
     <script type="text/javascript" src="d3/d3.min.js"></script> 
 
     <style type="text/css"> 
 
      /* No style rules here yet */  
 
     </style> 
 
    </head> 
 
    <body> 
 
     <script type="text/javascript"> 
 

 
      //Width and height 
 
      var width = 500; 
 
      var height = 300; 
 

 
    var vis = d3.select("body").append("svg") 
 
     .attr("width", width).attr("height", height); 
 
     
 
    d3.json("BangZone.json", function(json) { 
 
       
 
     // Create a unit projection. 
 
     var projection = d3.geo.mercator() 
 
      .scale(1) 
 
      .translate([0, 0]); 
 

 
     // Create a path generator. 
 
     var path = d3.geo.path() 
 
      .projection(projection); 
 

 
     // Compute the bounds of a feature of interest, then derive scale & translate. 
 
     var b = path.bounds(json), 
 
      s = .95/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
 
      t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2]; 
 

 
     // Update the projection to use computed scale & translate. 
 
     projection 
 
      .scale(s) 
 
      .translate(t); 
 
      
 
     
 
     path = path.projection(projection); 
 
    
 
     // add a rectangle to see the bound of the svg 
 
     vis.append("rect").attr('width', width).attr('height', height) 
 
     .style('stroke', 'black').style('fill', 'none'); 
 

 
     vis.selectAll("path").data(json.features).enter().append("path") 
 
     .attr("d", path) 
 
     .style("fill", "red") 
 
     .style("stroke-width", "1") 
 
     .style("stroke", "black") 
 

 
    }); 
 
     
 
     </script> 
 
    </body> 
 
</html>

И файл GeoJSON является: BangaloreGeojsonwithZones

ли проблема в GeoJSON файле или в коде d3 ??

источник

2015-11-19 Yuvaraj M

Похоже, это всего лишь вопрос центрирования и масштабирования карты. Измените ширину штриха на '.style (« ширина штриха »,« 10 »)', и вы увидите, что часть Бангалора карты загружена и отображается. Прямоугольник представляет мир. Если вы измените 'mercator' на' var projection = d3.geo.albers() ', мир будет показан как круг, а в Бангалоре будет одна маленькая точка на нем. Немного нажал на время, поэтому не смог больше помочь сейчас. – Nav

Ваш файл GeoJSON использует EPSG :: 37001. Попробуйте преобразовать его в EPSG: 4326 и посмотрите, поможет ли это. Вы можете конвертировать его с помощью QGIS.

У меня была аналогичная проблема, решение находится здесь: d3-javascript-and-geojson-lines-in-stockholm-map-very-strange.

источник

2015-11-20 09:22:31 seb

Эй, Seb, даже после смены его на EPSG: 4326 его не работает должным образом. Тот же результат. –

Можете ли вы предложить другое решение? пожалуйста –

Бангалор GeoJSON карта с d3 JS

ответ

Смежные вопросы