Question

我有一个代码，可以使用谷歌地图并在其上面上传一个D3图层，这是在V3中它工作正常。现在我需要将它传输到v4并且它给了我错误：的＆＃34;未捕获的TypeError：r不是函数＆＃34; 以下代码是在将其传输到v4

之后

<body>
        <div id="map"></div>
      <script>
        var map = new google.maps.Map(d3.select("#map").node(), {
          zoom: 7,
          center: new google.maps.LatLng(31.5852,36.2384),
          mapTypeId: google.maps.MapTypeId.ROADMAP,

         styles: [

                {elementType: 'geometry', stylers: [{color: "#212121"}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},

              ]
        });

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

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

              var path = d3.geoPath().projection(googleMapProjection);

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

              var g = svg.append('g')
                .attr("id", "mapGroup");
    //I believe the problem is here.... 
              g.selectAll(".path")
                .data(jordanLevel2.features)
                .enter()
                .append("path")
                .attr("d", path)
                .attr('class', 'state selected')
                .style("fill", function(d, i) {
                  return color[i % color.length];
                })
                .style('opacity', .7);

            }
          }
          overlay.setMap(map);

        });
      </script>
    </body>

Answer 1

不幸的是，没有任何简单的方法可以从v3迁移到v4。 v4版本是模块化的，是许多小型库的集合，而不是一个大型库。因此，这些变化是根本性的，可能会更好。我发现Irene Ros的这个presentation是迁移到v4的良好开端。另外，请参阅GitHub repo，其中有很多Scott手册迁移到v4的例子。

d3从v3到v4的翻译

1 个答案: