Question

我有this d3 js地图。我试图做一个简单的事情，如变焦平底锅就停了下来。现在只有点缩放（我使用v4）。如何“同步”点的缩放和平移并映射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中的地图缩放和平移+比例限制

1 个答案: