带有显示首都的圆圈的地图语义缩放

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 元素并且圆圈在其中。我的做法是 "shrink" 放大时的圆圈。

// 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.

Answer 2

我知道这是一个旧的 post，它已经有一个公认的答案，但正如最初的 post 所建议的那样，d3 的语义缩放是一种更简洁的方法。我按照这个演示 https://bl.ocks.org/mbostock/368095 实现了与您所做的相同的事情（地图上城市上的圆圈）。我唯一需要改变的是我必须在变换函数中减去圆圈的初始位置以更正它们的初始位置。

  function transform(t) {
      return function(d) {
          const point = [d.x, d.y] // this is the initial point
          const tPoint = t.apply(point) // after translation
          const finalPoint = [tPoint[0] - d.x, tPoint[1] - d.y]// subtract initial x & y to correct 
          return `translate(${finalPoint})`;
  };

}

带有显示首都的圆圈的地图语义缩放

Semantic zoom on map with circle showing capital

d3.js

zooming