地图上的语义缩放显示大写的圆圈

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 link

有人帮我请！

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; 
    }); 
}); 

更新fiddle。