將d3 v3轉換爲v4（投影）

Question

如何將此代碼從v3轉移到v4。此代碼的主要目標是在Google地圖上添加一層路徑並將兩個投影結合在一起。 我之前在v3中的代碼工作正常。現在我需要將其升級到V4。

d3.json("Export_Output_6_modified.json", function(error, jordanLevel2) { 
     if (error) throw error 

     //console.log(data[0].comuni[0].geometry.coordinates); 
     var overlay = new google.maps.OverlayView(); 

     overlay.onAdd = function() { 

     var layer = d3.select(this.getPanes().overlayLayer).append("div");//.attr("height",1000) 

     overlay.draw = function() { 

      layer.select('svg').remove(); 

      var w = 900; 
      var h = 900; 

      var color = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999']; 
      var heat_color = d3.scaleLinear().domain([0, 1]).range(['#b2df8a', '#ff7f00']).interpolate(d3.interpolateHcl); 

      var overlayProjection = this.getProjection(); 
      console.log(overlayProjection); 


     // Turn the overlay projection into a d3 projection 
      var googleMapProjection = d3.geoProjection(function(coordinates) { 
      var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);console.log(googleCoordinates); 
      var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);console.log(pixelCoordinates); 
      return [pixelCoordinates.x, pixelCoordinates.y]; 
      }); 

     var path = d3.geoPath(googleMapProjection); 


      var svg = layer.append("svg") 
      .attr('width', w) 
      .attr('height', h) 

      var g = svg.append('g') 
      .attr("id", "mapGroup"); 


      g.selectAll("path") 
      .data(jordanLevel2.features) 
      .enter() 
      .append("path") 
      .attr("d", googleMapProjection) 
      .attr('class', 'state selected') 
      .style("fill", function(d, i) { 
       return color[i % color.length]; 
      }) 
      .style('opacity', .7); 

     } 
     } 
     overlay.setMap(map); 

    }); 

我試圖改變geo.path到地理路徑，也把我調到大部分代碼到V4把仍然給我的錯誤什麼建議嗎？

Answer 1

Passing functions to path.projection are no longer supported in d3.js-v4。您需要使用d3.geoProjection進行構建。

喜歡的東西，

var googleMapProjection = d3.geoProjection(function(radLon, radLat) { 
     // Convert radians to degrees first. 
     var googleCoordinates = new google.maps.LatLng(radLon * 180/Math.PI, radLat * 180/Math.PI); 
     var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates); 
     return [pixelCoordinates.x, pixelCoordinates.y]; 
}); 

var path = d3.geoPath(googleMapProjection);