title: Unexpected lines/polygons when converting JSON to topoJSON
body: <p>I want to display the <code>topoJSON</code> on a <code>leaflet</code> map with <code>d3</code>. Doing that, I follow <a href="https://gist.github.com/edouard-lopez/10694800" rel="nofollow noreferrer">this example</a> hosted on GitHub.
  That is the code I derived from the gitHub example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;D3 Test&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"&gt;
      &lt;script type="text/javascript" src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="map" style="width:600px; height:600px;"&gt;&lt;/div&gt;
      &lt;script&gt;
              var map = new L.Map("map", {
                              center: [37.8, -96.9],
                              zoom: 4
                      })
                      .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
  
              var svg = d3.select(map.getPanes().overlayPane).append('svg');
              var g = svg.append('g').attr('class', 'leaflet-zoom-hide');
  
              d3.json("pathToTopotJson", function(error, collection) {
                      if (error) throw error;
                      console.log(collection)
  
                      var bounds = d3.geo.bounds(topojson.feature(collection, collection.objects.collection));
                      var path = d3.geo.path().projection(projectPoint);
  
                      var feature = g.selectAll('path')
                              .data(topojson.feature(collection, collection.objects.collection).features)
                              .enter()
                              .append('path');
  
  
                      map.on('viewreset', reset);
                      reset();
  
                      // Reposition the SVG to cover the features.
                      function reset() {
                              var bottomLeft = projectPoint(bounds[0]),
                                      topRight = projectPoint(bounds[1]);
  
                              svg.attr('width', topRight[0] - bottomLeft[0])
                                      .attr('height', bottomLeft[1] - topRight[1])
                                      .style('margin-left', bottomLeft[0] + 'px')
                                      .style('margin-top', topRight[1] + 'px');
  
                              var translation = -bottomLeft[0] + ',' + -topRight[1];
                              g.attr('transform', 'translate(' + -bottomLeft[0] + ',' + -topRight[1] + ')');
  
                              feature.attr('d', path);
                      }
                      // Use Leaflet to implement a D3 geographic projection.
                      function projectPoint(x) {
                              var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
                              return [point.x, point.y];
                      }
  
              })
      &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>The <code>topoJSON</code> gets displayed. But, with unexpected Polygons/Lines:
  <a href="https://i.stack.imgur.com/7KoIW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7KoIW.png" alt="unexpected polygons"></a></p>
  
  <p>When I display the <code>JSON</code> the polygons/lines are not there:
  <a href="https://i.stack.imgur.com/rHpim.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rHpim.png" alt="josn display"></a></p>
  
  <p>Whats going wrong with <code>topoJSON</code>? Is it something in my code or did the converting go wrong?</p>