Question

我想阻止用户过度离开我创建的地图。但是，我很难成功应用.translateExtent()功能。

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

＆＃13;

<!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>

＆＃13;

控制台中的错误消息是：

错误：属性转换：预期数量，＆＃34;翻译（NaN时，NAN）规模（1）＆＃34;

我无法理解为什么平移/缩放正在返回＆＃39; NaN＆＃39; x和y的值，但它与.translateExtent()有关。我觉得我需要采取额外的步骤，使用当前的比例值来改变范围，但我在网上看到的所有例子似乎都不需要它。

Answer 1

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

如果指定了extent，则将translate范围设置为指定的范围点数组[[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中使用.translateExtent返回＆＃39; NaN＆＃39; x＆amp;缩放时的y值

1 个答案: