我正在尝试向圆圈添加拖动并尝试应用 translateExtent。那么如何限制拖动边界为矩形呢?
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([[100, 100], [400, 400]])
.on("zoom", zoomed);
// 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)
.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);
}
关于 https://github.com/d3/d3-zoom#zoom_translateExtent 的任何详细解释有效吗?边界是如何从坐标计算出来的。
最佳答案
这里有一些注意事项,考虑到我过去肯定被它们绊倒过,我希望我能在这里解释清楚。
缩放范围
让我们看看缩放范围 (zoom.extent
) - 不是翻译范围。默认范围是“[[0, 0], [width, height]]
,其中 width 是元素的客户端宽度,height 是其客户端高度”(d3-zoom docs)。由于您在 svg
上调用缩放,因此默认范围应为 [0,0],[width,height]
,在您的情况下宽度和高度为 500每一个。
您的翻译范围 [100,100],[400,400]
比您的缩放范围小,这不起作用,来自 Mike Bostock 的类似问题:“问题是您指定的 translateExtent 小于缩放范围。因此无法满足请求的约束。” (d3-zoom issue tracker)。
翻译范围
那么问题是您使用的翻译范围不正确。您指定的平移范围是您希望将圆约束到的范围。但这不等于平移范围,它是在给定缩放范围的情况下要显示的坐标空间的边界(圆所在的世界的边界)。
让我们考虑 [100,100]
处的圆圈,它以 translate(0,0)
的缩放变换为中心:它位于其起始位置。这标记了您希望将圆限制在其中的边界框的左上角位置。此时缩放的左上角坐标是 [0,0]
。缩放范围或视口(viewport)的右下角是 [500,500]
。
如果圆圈位于 [400,400]
,即其预期移动的右下角,则它具有 translate(300,300)
的变换,因为它向右 300 像素从它开始的地方向下 300 像素(最初用 cx/cy 定位)。鉴于所有内容都向下和向右移动 300 像素,视口(viewport)或缩放范围的左上角现在是 [-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>
关于javascript - "d3.translateExtent"坐标如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53771028/