我有一个简单的 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>
我尝试过 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);
});
查看演示：
function zoomed() {
gElem.attr("transform", d3.event.transform)
}
var zoom = d3.zoom().on("zoom", zoomed);
var svg = d3.select("body")
.append("svg")
.attr("width", "400")
.attr("height", "200")
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);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Reset">RESET</button>就我而言，所有解决方案都不起作用。 我正在使用 d3 v.7。 我为初始图表创建了 d3.zoom() ，作为图表创建的一部分，将其缩放调整为放大状态。然后，该图表将被替换为另一种图表类型（通过用户选择）（在同一页面上）。 请注意，旧的缩放基础元素被删除，新的缩放基础被创建，并且缩放功能被创建并附加到新的缩放基础。 尽管这个新的变换对象保留了之前 d3.zoom() / 变换的值。 在 d3.zoomIdentity 和检查 d3.zoomTransform(GraphArea.node().
中都可以观察到这一点我尝试在新的图表模块中重置：
// old chart dom removed
// new chart dom created
// new d3.zoom() and .call() on zoom base made
var InitTransform = d3.zoomIdentity.translate(0, 0).scale(1);
GraphArea.call(_ZoomFunc.transform, d3.zoomIdentity);
And
GraphArea.call(_ZoomFunc.transform, d3.zoomIdentity);
它们都不起作用。 检查以下内容时，第一个图表变换值中的旧值仍然存在：
console.log(d3.zoomIdentity);
console.log(d3.zoomTransform(GraphArea.node()));
Old values still there:
xw {k: 2.1842225416923844, x: -679.1333036533895, y: -322.552539944791}
这有合理的解释吗？