Javascript 如何重置d3.js中的缩放？_Javascript_D3.js_Svg

Javascript 如何重置d3.js中的缩放？

javascript d3.js svg

Javascript 如何重置d3.js中的缩放？,javascript,d3.js,svg,Javascript,D3.js,Svg,我有一个简单的svg矩形，并使用d3.js在其上添加了缩放和平移。我还添加了一个按钮，以便在单击按钮后尝试重置缩放。代码如下： <button>Reset</button> <body> <script> function zoomed() { svg.attr("transform", d3.event.transform) } var svg = d3.select("body

我有一个简单的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>

重置
函数缩放（）{
attr（“transform”，d3.event.transform）
}
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.call（d3.zoom（）.on（“缩放”，缩放））
.附加（“g”）
svg.append（“rect”）
.attr（“x”，450）
.attr（“y”，200）
.attr（“宽度”，300）
.attr（“高度”，200）
.样式（“填充”，“#B8DEE6”）
$（“#重置”）。单击（（）=>{
变换（容器，d3.zoomIdentity.scale（1））；
})

我尝试过zoom.transform（container，d3.zoomIdentity.scale（1）），但它似乎不起作用。有人能告诉我重置功能有什么问题吗？

您需要以这种方式重写代码：

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

var zoom = d3.zoom().on("zoom", zoomed);

var svg = d3.select("body")
  .append("svg")
  .attr("width", "600")
  .attr("height", "600")


var gElem = svg.append("g").call(zoom);

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

$("#Reset").click(() => {
  gElem.transition()
    .duration(750)
    .call(zoom.transform, d3.zoomIdentity);
});

检查演示：

函数缩放（）{
attr（“transform”，d3.event.transform）
}
var zoom=d3.zoom（）.on（“缩放”，缩放）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”、“400”）
.attr（“高度”、“200”）
var gElem=svg.append（“g”）.call（缩放）；
gElem.append（“rect”）
.attr（“x”，50）
.attr（“y”，50）
.attr（“宽度”，300）
.attr（“高度”，200）
.样式（“填充”，“#B8DEE6”）
$（“#重置”）。单击（（）=>{
gElem.transition（）
.持续时间（750）
.call（zoom.transform，d3.zoomIdentity）；
});

重置
非常感谢您的帮助我很乐意提供帮助。当提问者接受答案时投否决票是很奇怪的。的副本，没有被接受的答案