在地图上的语义缩放与显示资本的圈子

Question

我想在d3.js的地图上实现语义缩放.我已经开发了一个地图和特定国家的主要城市的例子,它工作正常,但有时候圆圈由于地图附近的地方而重叠,所以如果我实现语义缩放,这将解决我的圆重叠问题.

我不明白如何在地图中仅转换图形而不是圆形.

我的缩放功能代码是:

var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

我的jsfiddle链接

有人帮帮我!

Answer 1

你问怎么不根据变焦缩放圈？你拥有它的方式就是缩放g元素,圆圈就在其中.我这样做的方法是在缩放时"缩小"圆圈.

// zoom and pan
var zoom = d3.behavior.zoom()
  .on("zoom",function() {
     g.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
     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;
    });
});

更新小提琴.