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/

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

1 个答案: