d3 js v4 + 比例限制中的地图缩放和平移

Question

我有 this d3 js 地图。我试着做一个像缩放这样简单的东西平底锅就停了下来。现在只有点缩放（我使用 v4）。如何 'synchronize' 缩放和平移点和映射 svg？
如何在 d3 v4 中设置缩放和平移的限制？我希望它像 this

var svg = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .style("border","none") 
          .style("background-color", "none")
          .call(d3.zoom().on("zoom", function () {
          svg.attr("transform", d3.event.transform)
                 }))
          .append("g");

Answer 1

圆圈会缩放，但路径不会缩放，因为您附加它们的方式不同。首先，让我们看看如何应用缩放：

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 选择）上调用缩放时，它会修改 svg 选择（实际上包含一个 g）：svg.attr(("transform"....

当您附加路径时，您使用 var map = d3.select("svg").insert(... 并创建一个新的 g 来保存路径。但是 - 此 g 不在选择项 svg 中或它的子项 - 因此它不会更新：在本例中为 d3.select("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 边界，我们可以基于这些尺寸进行约束。

这是更新后的 bin。

d3 js v4 + 比例限制中的地图缩放和平移

Map zoom and pan in d3 js v4 + scale limit

d3.js

zooming

pan