D3 添加缩放和平移到地图

Question

这里是新手。

我正在尝试从 d3noob 的站点向 this map. I've copied this code from the "Zooming and panning a map" section of this page 添加缩放和平移：

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

svg.call(zoom)

并在第 163 行稍作调整后粘贴：

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

svg.call(zoom)

但是，没有缩放和平移行为，也没有控制台错误。我错过了什么？感谢您的帮助！

Answer 1

想通了。问题是我没有放大正确的包含元素。一旦我这样设置，效果很好。

在主svg里面做一个<g>
将所有地图内容放入 <g>
设置缩放功能平移和缩放 <g>
但在 svg 而不是 <g>

.call

D3 添加缩放和平移到地图

D3 add zoom and pan to map

javascript

dictionary

d3.js

zooming