这里有一些考虑因素,考虑到我过去确实被它们绊倒过,我希望我能在这里清楚地解释它们。
缩放范围
让我们看看缩放范围(zoom.extent
) - 不翻译范围。默认范围是“[[0, 0], [width, height]]
其中 width 是元素的客户端宽度,height 是其客户端高度"(d3-zoom 文档 https://github.com/d3/d3-zoom/blob/master/README.md#zoom_extent)。由于您正在调用缩放svg
,默认范围应该是[0,0],[width,height]
,其中宽度和高度在您的情况下均为 500。
您的翻译程度,[100,100],[400,400]
is smaller比你的缩放范围大,这是行不通的,来自 Mike Bostock 关于类似问题的文章:“问题是你指定的 translateExtent 小于缩放范围。所以没有办法满足所请求的约束。” (d3-zoom 问题跟踪器 https://github.com/d3/d3-zoom/issues/50).
翻译范围
那么问题是您错误地使用了翻译范围。您指定的平移范围是您希望圆约束的边界。但这不等于平移范围,平移范围是给定缩放范围时要显示的坐标空间的边界(圆所在世界的边界)。
让我们考虑一下圆[100,100]
,它以缩放变换为中心translate(0,0)
:处于起始位置。这标记了您希望将圆约束在其中的边界框的左上角位置。此时缩放的左上角坐标是[0,0]
。缩放范围或视口的右下角是[500,500]
.
如果圆位于[400,400]
,其预期运动的右下角,它有一个变换translate(300,300)
因为它距离起始位置向右 300 像素,向下 300 像素(最初使用 cx/cy 定位)。鉴于所有内容都向下和向右移动 300 像素,视口或缩放范围的左上角现在是[-300,-300]
(在给定缩放变换的情况下,cx,cy 为 -300 的圆的中心将位于 SVG 的左上角)。而右下角是[200,200]
.
首先,当圆不能进一步向上或向左移动时,我们可以看到范围[0,0],[500,500]
,当圆圈位于右下角时,当圆圈无法进一步向下或向右移动时,我们可以看到范围为[-300,-300],[200,200]
.
采取极端的方式,我们想要的最大程度是:[-300,-300],[500,500]
,这是我们想要显示的世界范围,以便圆与矩形保持重叠:
var height = 500;
var width = 500;
var zoom = d3.zoom()
.translateExtent([[-300, -300], [500, 500]])
.on("zoom", zoomed);
var svg = d3.select("body")
.append("svg")
.attr("width", height)
.attr("height", width)
.append("g")
svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("height", 300)
.attr("width", 300);
var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.style("fill", "red")
svg.call(zoom);
function zoomed() {
circle.attr("transform", d3.event.transform);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
可能的改进
如果我们使用宽度和高度等于矩形宽度和高度的缩放范围:
.extent([[0,0],[300,300]])
我们不必扩展 translateExtent 来解决仍在 SVG 内的矩形周围的空白空间:
.translateExtent([[-300,-300],[300,300]])
var height = 500;
var width = 500;
//if extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world, and returns this zoom behavior.
var zoom = d3.zoom()
.translateExtent([[-300,-300],[300,300]])
.extent([[0,0],[300,300]])
.on("zoom", zoomed);
console.log(zoom.extent());
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body")
.append("svg")
.attr("width", height)
.attr("height", width);
svg.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("height", 300)
.attr("width", 300);
var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.style("fill", "red")
svg.call(zoom);
function zoomed() {
circle.attr("transform", d3.event.transform);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>