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。

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

1 个答案: