我有一个简单的 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)) 但它似乎不起作用。谁能告诉我重置功能有什么问题?