d3.js - d3 js v4 + 比例限制中的 map 缩放和平移

Question

1. 我有 this d3 js map 。我试着做一个像缩放这样简单的东西平底锅就停了下来。现在只有点缩放(我使用 v4)。如何“同步”点的缩放和平移和 map svg？

2. 如何在 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 .