相关疑难解决方法(0)

如何在 d3.js 中重置缩放?

我有一个简单的 svg 矩形,我使用 d3.js 在它上面添加了缩放和平移。我还添加了一个按钮,以便在单击按钮后尝试重置缩放。这是代码:

<button>Reset</button>
<body>
  <script>

      function zoomed() {
              svg.attr("transform", d3.event.transform)
      }

    var svg = d3.select("body")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%")
      .call(d3.zoom().on("zoom", zoomed))
      .append("g")

    svg.append("rect")
        .attr("x", 450)
        .attr("y", 200)
        .attr("width", 300)
        .attr("height", 200)
        .style("fill", "#B8DEE6")

    $("#Reset").click(() => {
    zoom.transform(container, d3.zoomIdentity.scale(1));
})

  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

我试过 zoom.transform(container, d3.zoomIdentity.scale(1)) 但它似乎不起作用。谁能告诉我重置功能有什么问题?

javascript svg d3.js

5
推荐指数
1
解决办法
7016
查看次数

标签 统计

d3.js ×1

javascript ×1

svg ×1