Question

这是一个新手。

我尝试将缩放和平移添加到this map。我已经从＆＃34;缩放和平移地图＆＃34;中复制了此代码。来自d3noob网站的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

想出来。问题是我没有放大正确的包含元素。一旦我这样设置它，它就很有效。

在主<g>

svg

将所有地图内容放在<g>
设置缩放功能以翻译和缩放<g>
但是.call上的svg而不是<g>

D3添加缩放和平移到地图

1 个答案: