缩放时在 D3 returns 'NaN' x 和 y 值中使用 .translateExtent

Question

我想防止用户平移距离我创建的地图太远。但是，我很难成功应用 .translateExtent() 函数。

下面的简化示例（我用正方形替换了地图）复制了这个问题。如果我删除 .translateExtent() 函数，代码就可以工作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      #svg {
        background-color: rgb(239, 239, 244);
      }
      #shape {
        fill: rgb(0, 75, 122);
        stroke: white;
        stroke-width: 3px;
      }
      #shape:hover {
        fill: rgb(150, 30, 27);
      }
    </style>
  </head>
  <body>
    <script>
      var width = 300,
          height = 300;

      var container = d3.select("body").append("div");

      var svg = container.append("svg")
             .attr("id", "svg")
             .attr("width", width)
             .attr("height", height);

      var group = svg.append("g");

      var shape = group.append("rect")
               .attr("id", "shape")
               .attr("width", 150)
               .attr("height", 150)
               .attr("x", 75)
               .attr("y", 75);

      zoom = d3.zoom()
          .scaleExtent([1, 3])
          .translateExtent([0, 0], [width, height])
          .on("zoom", zoomed);

      svg.call(zoom);

      function zoomed() {
        change = d3.event.transform;
        console.log(change)
        group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
        group.select("#shape").style("stroke-width", (3 / change.k) + "px");
      }
    </script>
  </body>
</html>

控制台中的错误信息是：

Error: attribute transform: Expected number, "translate(NaN,NaN)scale(1)".

我不明白为什么 panning/zooming 返回 x 和 y 的 'NaN' 值，但它与 .translateExtent() 有关。我觉得我需要采取一个额外的步骤来使用当前的比例值转换范围，但是 none 我在网上看到的示例似乎需要它。

Answer 1

A D3.zoom translateExtent 接受一个数组作为输入

If extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]]

您提供了两个数组：

.translateExtent([0, 0], [width, height])

尝试将它们嵌套在一个数组中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      #svg {
        background-color: rgb(239, 239, 244);
      }
      #shape {
        fill: rgb(0, 75, 122);
        stroke: white;
        stroke-width: 3px;
      }
      #shape:hover {
        fill: rgb(150, 30, 27);
      }
    </style>
  </head>
  <body>
  <body>
    <script>
      var width = 300,
          height = 300;

      var container = d3.select("body").append("div");

      var svg = container.append("svg")
             .attr("id", "svg")
             .attr("width", width)
             .attr("height", height);

      var group = svg.append("g");

      var shape = group.append("rect")
               .attr("id", "shape")
               .attr("width", 150)
               .attr("height", 150)
               .attr("x", 75)
               .attr("y", 75);

      zoom = d3.zoom()
          .scaleExtent([1, 3])
          .translateExtent([[0, 0], [width, height]])
          .on("zoom", zoomed);

      svg.call(zoom);

      function zoomed() {
        change = d3.event.transform;
        console.log(change)
        group.attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
        group.select("#shape").style("stroke-width", (3 / change.k) + "px");
      }
    </script>
  </body>
</html>

缩放时在 D3 returns 'NaN' x 和 y 值中使用 .translateExtent

Using .translateExtent in D3 returns 'NaN' x & y values when zooming

data-visualization

scale

zooming

d3.js