d3 v3からv4への翻訳

Googleマップを使用してV3上にD3レイヤーをアップロードし、正常に動作するコードを持っています。これをv4に転送する必要があります。：次のコードは、後に、それは残念ながら、V4にV3から移行する簡単な方法はありませんd3 v3から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>

出典

2017-04-03 DANAA

-1

V4に転送され、「キャッチされない例外TypeError rは関数ではありません」。 v4のバージョンはモジュラーであり、1つの大きなライブラリの代わりに多数の小さなライブラリのコレクションです。したがって、変化は基本的なものであり、より良いものになるかもしれません。私はv4に移行するのに良いスタートとして、Irene Rosのpresentationを見つけました。また、GitHub repoを参照してください。これには、v4に移行されたScottの本の多くの例があります。

出典

2017-04-03 19:56:34

はい私はそれを知っていますが、反対側で私は特定の側面を翻訳する必要があります。プレゼンテーションを読みました投影からgeoProjectionに変換する必要がありますが、エラーが発生しました – DANAA

答えて

関連する問題