轉換<g>屬性在d3.js的地圖上

Question

我準備了d3.js中的一個地圖示例。我想在地圖上實現放大縮小，在地圖上顯示不同國家的城市和節點（包含圓圈，笑臉和文字，截至目前我推出圓圈和笑臉）。當我放大地圖時，我無法轉換標籤，因此按照我的邏輯，笑臉錯位。所以如何在地圖上只轉換g標籤。我不想變換標籤內的形狀（圓形，圖像）。

My Jsfiddle link

var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
    g.attr("transform","translate("+ 
     d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
    g.selectAll(".node") 
     .attr("width", function(){ 
     var self = d3.select(this); 
     var r = 28/d3.event.scale; // set radius according to scale 
     self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2); // scale stroke-width 
     return r; 
    }); 
     g.selectAll(".circle") 
     .attr("r", function(){ 
     var self = d3.select(this); 
     var r = 8/d3.event.scale; // set radius according to scale 
     self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2); // scale stroke-width 
     return r; 
    }); 
}); 

請人幫助我解決我的問題。

Answer 1

要執行語義縮放，人們將需要調整width和笑臉的height面以及調整x和y位置由於調整將相對於寬度/高度變化：

g.selectAll(".node") 
.attr("x", function(d) { return (projection([d.lon, d.lat])[0]) - (8/d3.event.scale); }) 
.attr('y', function(d) { return (projection([d.lon, d.lat])[1]) - (8/d3.event.scale); }) 
.attr('width', function() { return 20/d3.event.scale; }) 
.attr('height', function() { return 20/d3.event.scale; }) 

演示：http://jsfiddle.net/ktee4dLp/