"d3.translateExtent" 坐标如何工作?
How "d3.translateExtent" coordinate works?
我正在尝试向圆圈添加拖动并尝试应用 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]]
,其中宽度是元素的客户端宽度,高度是其客户端高度”(d3-zoom docs)。由于您在 svg
上调用缩放,因此默认范围应为 [0,0],[width,height]
,您的宽度和高度各为 500。
您的翻译范围 [100,100],[400,400]
比您的缩放范围 小 ,这不起作用,来自 Mike Bostock 的类似问题:"The problem is that the translateExtent you’ve specified is smaller than the zoom extent. So there’s no way to satisfy the requested constraint." (d3-zoom issue tracker).
翻译范围
那么问题是您使用的翻译范围不正确。您指定的平移范围是您希望将圆约束到的范围。但这不等于平移范围,它是在给定缩放范围的情况下要显示的坐标 space 的边界(圆所在的世界的边界)。
让我们考虑 [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 中的矩形周围的空 space:
.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>
我正在尝试向圆圈添加拖动并尝试应用 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]]
,其中宽度是元素的客户端宽度,高度是其客户端高度”(d3-zoom docs)。由于您在 svg
上调用缩放,因此默认范围应为 [0,0],[width,height]
,您的宽度和高度各为 500。
您的翻译范围 [100,100],[400,400]
比您的缩放范围 小 ,这不起作用,来自 Mike Bostock 的类似问题:"The problem is that the translateExtent you’ve specified is smaller than the zoom extent. So there’s no way to satisfy the requested constraint." (d3-zoom issue tracker).
翻译范围
那么问题是您使用的翻译范围不正确。您指定的平移范围是您希望将圆约束到的范围。但这不等于平移范围,它是在给定缩放范围的情况下要显示的坐标 space 的边界(圆所在的世界的边界)。
让我们考虑 [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 中的矩形周围的空 space:
.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>