d3.js svg overlay to google map

Question

私はd3.js svgを持っています。これはOverlayViewを使ってGoogleマップに重ねました。次に、ユーザーが入力テキストに郵便番号を指定し、その特定の郵便番号にズームインするためにマップが必要です。私は郵便番号の緯度と経度を持っています。しかし、私はそれをSVGにズームすることはできません。私はGoogleのAPIを使用してズームインすることができますが、それは私が必要とするものではありません。私は線形の色で表示する必要があるデータがあるので、svgをズームインする必要があります。これまでのコードは次のとおりです。

function zoomtoZipCode(){ 
    var counties = d3.select("svg").select("g") //apply zoom here. 
     .call(d3.behavior.zoom().scaleExtent([1, 7]) 
     .on("zoom", zoom)) 
     .selectAll(".counties") 
     .data(conus.features) 
     .enter() 
} 
function zoom(){ 
    var p = d3.select("path")[0]; 
    d3.select(p).attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

ありがとうございました。ありがとう。

Answer 1

私は私のズーム変数を定義し、次のようにd3.jsバージョン4で用語を使用するために必要な：

var zoom = d3.zoom() 
    .scaleExtent([1, 10]) 
      .on("zoom", zoomed2); 

     svg.append("rect") 
      .attr("class", "overlay") 
      .attr("width", width) 
      .attr("height", height) 
      .call(zoom); 

     function zoomed2() { 
      d3.select("#svgMap2").select("g").selectAll(".county") 
       .text("text", function (d) { return d.properties.County; }) 
       .attr("transform", d3.event.transform) 
       .select(".county").style("stroke-width", .5/d3.event.transform.k + "px"); 
     }