title: projectionStream is not a function in D3.js v4
body: <p>We are working on this website <a href="http://bandaultralarga.italia.it/mappa-bul/" rel="nofollow">http://bandaultralarga.italia.it/mappa-bul/</a></p>
  
  <p>On that page we have a gMap where we draw some polygons on top, using d3(v3) and topoJson.</p>
  
  <p>Now we want (would like) to switch to the new v4 to add new data viz design on the page but keeping what we already had.</p>
  
  <p>Troubles come in the overlay function below where we translate the coordinates into the Google Map system.</p>
  
  <p>Referring to D3 v4 API Docs we switched from:</p>
  
  <pre><code>path = d3.geo.path().projection(googleMapProjection);
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>path = d3.geoPath().projection(googleMapProjection);
  </code></pre>
  
  <p>but this generates the subject error (projectionStream is not a function.)</p>
  
  <p>Any clue to get this to work again?</p>
  
  <pre><code>var overlay = new google.maps.OverlayView();
  
  overlay.onAdd = function () {
  
      var div = document.createElement('div');
      div.id = 'svg_map';
      div.style.borderStyle = 'none';
      div.style.borderWidth = '0px';
      div.style.position = 'absolute';
      this.getPanes().overlayMouseTarget.appendChild(div);
  
      overlay.draw = function () {
  
          var overlayProjection = this.getProjection();
  
          var googleMapProjection = function (coordinates) {
              var googleCoordinates = new google.maps.LatLng(coordinates[0], coordinates[1]);
              var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
              return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
          };
  
          path = d3.geoPath().projection(googleMapProjection); // Here is where troubles come
  
          generaOverlay(overlay, datiShape);
  
      };
  
  };
  overlay.setMap(map);
  </code></pre>