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更改为geoPath，同时我将大部分代码转移到v4 put仍然给我一个错误任何建议？

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);

将d3 v3转移到v4（投影）

1 个答案: