我希望能够在以编程方式在页面加载时将 SVG 对象居中并缩放到它们之后平移和缩放它们。 (实际用例是放大到办公室的平面图。)
对于我的简单示例，我有 2 个加载初始过渡的矩形。 (这大大简化了我的实际用例。)
自动转换后，当用户尝试平移或缩放时 - 矩形会跳回到它们的初始位置。
This堆栈溢出问题很接近，但解决方案对我不起作用。在父 SVG (#rectSVG) 上调用 d3.select 似乎很接近，但上边距和左边距现在不正确。
javascript 文件:
var rectData = [
{ "x_axis": 10, "y_axis": 10, "color" : "green" },
{ "x_axis": 500, "y_axis": 10, "color" : "purple"}
];
var svgContainer = d3.select("body").append("svg")
.attr("width", 1800)
.attr("height", 1200)
.attr("id","rectSVG")
.append("g")
.attr("id","groupRect");
var rectangle = svgContainer.selectAll("rect")
.data(rectData)
.enter()
.append("rect")
.attr("x", function (d) { return d.x_axis; })
.attr("y", function (d) { return d.y_axis; })
.attr("fill",function (d) { return d.color; })
.attr("width", 200)
.attr("height", 100);
var centerScale = 1;
translate = [500, 500];
d3.select("#groupRect").transition()
.attr("transform", "translate("+translate+")scale(" + centerScale + ")")
.duration(650);
var svgZoomMM = d3.select("#rectSVG");
var _zoom = d3.zoom()
.scaleExtent([1, 1000])
.on("zoom", function() {
d3.select("#groupRect")
.attr("transform", d3.event.transform);
});
svgZoomMM.call(_zoom);
HTML 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<title>test</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
最佳答案
它跳转的原因是因为您通过选择 rectSVG 并对其进行了手动转换。缩放变换事件 (d3.event.transform) 不知道 react 已经被翻译了(你可以通过检查 d3.event.transform.x 和 d3.event.transform.y 来验证)。为了告诉缩放变换事件图形已经变换，您需要创建一个新的变换事件，例如
var t = d3.zoomIdentity.translate(500, 500).scale(1); 并将其应用于可缩放的 SVG svgZoomMM.transition().duration(650).call(_zoom .transform, t);
关于javascript - d3.js V4 zoom 在计算缩放后跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49928931/