Проблемы с рендерингом TopoJSON с использованием D3

Я визуализировал карту мира, используя topojson world-110m. Я напрямую использовал код, предоставленный Якобом в учебнике по картографированию D3 - http://www.digital-geography.com/d3-js-mapping-tutorial-1-set-initial-webmap/#.V4iGN9J97IV

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Set a style for our worldshape-data -->
  <style>
  path {
    stroke: red;
    stroke-width: 0.5px;
    fill: grey;
  }
  </style>
<body>

  <!-- implementation of the hosted D3- and TopoJson js-libraries -->
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>

  <!-- map creation --> 
  <script>
  // canvas resolution
  var width = 1000,
      height = 600;

  // projection-settings for mercator    
  var projection = d3.geo.mercator()
      // where to center the map in degrees
      .center([0, 50 ])
      // zoomlevel
      .scale(100)
      // map-rotation
      .rotate([0,0]);

  // defines "svg" as data type and "make canvas" command
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  // defines "path" as return of geographic features
  var path = d3.geo.path()
      .projection(projection);

  // group the svg layers 
  var g = svg.append("g");

  // load data and display the map on the canvas with country geometries
  d3.json("world-110m.json", function(error, topology) {
      g.selectAll("path")
        .data(topojson.object(topology, topology.objects.countries)
            .geometries)
      .enter()
        .append("path")
        .attr("d", path)
  });

  // zoom and pan functionality
  /*var zoom = d3.behavior.zoom()
      .on("zoom",function() {
          g.attr("transform","translate("+ 
              d3.event.translate.join(",")+")scale("+d3.event.scale+")");
          g.selectAll("path")  
              .attr("d", path.projection(projection)); 
    });

  svg.call(zoom)*/

  </script>
</body>
</html>

Теперь я хочу повторно использовать этот код для отображения карты Индии. Но когда я связываю его с файлом topoJSON в Индии, создается только пустой SVG. Консоль js выдает ошибку - topojson.v0.min.js:1 Uncaught TypeError: Cannot read property 'type' of undefined

Я разместил файлы world-110m.json и india.json в Dropbox - https://www.dropbox.com/sh/wrxyngyq4jdie9c/AACG2-dTzC79rRvlxlOC5poBa?dl=0


person Rohan Bapat    schedule 15.07.2016    source источник


Ответы (1)


Это просто небольшая ошибка.

topojson.object(topology, topology.objects.countries //wrong
topojson.object(topology, topology.objects.collection // right

В следующий раз проверьте данные, распечатав их на консоли и проверив их содержимое.

person Umesh Maharshi    schedule 15.07.2016
comment
Вы спасатель @Dragon_Slayer. Я пытался в течение последних бесконечных часов, тщетно прошел несколько руководств. Большое спасибо! - person Rohan Bapat; 15.07.2016
comment
Недавно я также столкнулся с той же проблемой. Хотя карта Индии не полная. - person Umesh Maharshi; 15.07.2016
comment
Карта Индии на самом деле является картограммой, поэтому кажется искаженной. Это поэтому вы сказали, что он неполный? - person Rohan Bapat; 15.07.2016
comment
Я не проверял четко, но он не включает полные J и K. Хотя не уверен - person Umesh Maharshi; 15.07.2016