D3世界地図の泡のズームを停止する

Question

現在、私はズーム機能をクリックした国や郡の境界レベルまで持ってきたD3世界地図に取り組んでいます。

ケニアの郡を指し示す泡が追加されました。私は追加したズーム機能を拡大しました。しかし、地図のズームに気泡のズームを止めたいと思います。

私の現在の仕事のためのプランナーです。

https://plnkr.co/edit/nZIlJxvU74k8Nmtpduzc?p=preview

、下あなたは全体g要素をスケーリングしているズームのためのコードであると

function clicked(d) { 

    var conditionalChange = d; 
    if(d.properties.hasOwnProperty("Country")){ 

     var country = d.properties.Country; 
     var obj = data.objects.countries.geometries; 
     $.each(obj, function(key, value) { 
      if(countries[key].properties.name == "Kenya") 
       { 
      conditionalChange = countries[key].geometry; 
         } 
      }); 
    } 
    d = conditionalChange; 
    if (active.node() === this) return reset(); 
    active.classed("active", false); 
    active = d3.select(this).classed("active", true); 

    var bounds = path.bounds(d), 
     dx = bounds[1][0] - bounds[0][0], 
     dy = bounds[1][1] - bounds[0][1], 
     x = (bounds[0][0] + bounds[1][0])/2, 
     y = (bounds[0][1] + bounds[1][1])/2, 
     scale = 1.2/ Math.max(dx/width, dy/height), 
     translate = [width/2 - scale * x, height/2 - scale * y]; 

    g.transition() 
     .duration(750) 
     .style("stroke-width", 1/ scale + "px") 
     .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
} 

function reset() { 
    active.classed("active", false); 
    active = d3.select(null); 

    g.transition() 
     .duration(750) 
     .style("stroke-width", "1px") 
     .attr("transform", ""); 
} 

Answer 1

をズームアウト、これは効果的にマップをズームします。すべてがサイズが大きくなります。

g.transition() 
     .duration(750) 
     .style("stroke-width", 1/ scale + "px") 
     .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 

がr属性を変更することによって、あなたは、あなたのサークルのために同様の調整を行う必要があり、円を同じサイズを維持するには：しかし、マップのラインのためにあなたはgスケールファクタの変化を反映するために、ストロークを調整していますgスケールファクタに応じて、各サークルのために：あなたが実際にサークルにクラスの都市円を適用されませんので、

g.selectAll(".city-circle") 
    .transition() 
    .attr("r", 5/scale) 
    .duration(750); 

けれども、あなたも、あなたがそれらを追加したときにそれを行う必要があります：

.attr("class","city-circle")

はまた、あなたがリセット時にストローク幅をリセットすると同じように、あなたは円rをリセットする必要があります。私たちthisを与える

g.selectAll(".city-circle") 
    .transition() 
    .attr("r", 5) 
    .duration(750); 

一緒に。