d3从v3到v4的转换

Question

我有一个使用Google地图并在其上上传D3层的代码，该层在V3中运行良好。现在我需要将其传输到v4，它给我的错误是： “ Uncaught TypeError：r不是一个函数“以下代码是将其转移到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的演示文稿是迁移到v4的良好起点。 另外，请参阅GitHub存储库，其中有许多Scott图书的示例已迁移到v4。

d3从v3到v4的转换

问题描述

1 个解决方案

解决方案1
0 2017-04-03 19:56:34

d3从v3到v4的转换

问题描述

1 个解决方案

解决方案1 0 2017-04-03 19:56:34

解决方案1
0 2017-04-03 19:56:34