D3.js d3 js v4+中的地图缩放和平移；规模限制

我有D3JS地图。我试着做一件像zoom这样简单的事情 然后摇摇晃晃，就停了下来。现在只有点可以缩放（我使用v4）。如何“同步”点的缩放和平移以及映射svg

如何在d3 v4中设置缩放和平移限制？我希望它是这样的

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.style（“边框”、“无”）
.style（“背景色”、“无”）
.call（d3.zoom（）.on（“zoom”，函数）（）{
attr（“transform”，d3.event.transform）
}))
.附加（“g”）圆圈会缩放，但路径不会缩放，因为您是如何附加它们的。首先，让我们看看如何应用缩放：

var svg = d3.select("body")
      .append("svg")
      ...
      .call(d3.zoom().on("zoom", function () {
      svg.attr("transform", d3.event.transform)
             }))
      .append("g");  // returns a selection of a newly appended g element

因此，选择
svg
实际上是一个
g
元素。在svg元素（不是svg选择）上调用zoom时，它修改svg选择（实际上包含一个g）：
svg.attr（（“transform”…
）

附加路径时，使用var
map=d3。选择（“svg”）。插入（…
）并创建一个新的
g
来保存路径。但是-此
g
不在所选内容中，或者不是所选内容的子项
svg
，因此它不会更新：
d3。在这种情况下，选择（“svg”）！=svg
。请使用：

 var map = svg.insert(...  // we insert into the svg selection which holds a g

通过这种方式，我们将元素插入父级
g
，该父级在每次缩放时都会更新


虽然这确实是第二个问题，但解决方案非常简单。d3.zoom（）行为可以同时受缩放和平移的约束：

d3.zoom().scaleExtent([1,4]) // limit scale to full size or 4x size.
   .translateExtent([[0,0],[width,height]])  // limit pan to original SVG dimensions

zoom.translateExtent（[p1，p2]）
采用两个点，左上角和右下角。如果您的功能最初以1的比例加载时未超出SVG边界，我们可以基于这些维度进行约束

这里有一个更新的