转换 d3.js 地图上的 <g> 属性

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 的位置，因为调整将相对于 width/height:

 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/

转换 d3.js 地图上的 <g> 属性

Transform <g> attribute on map of d3.js

svg

d3.js