"d3.translateExtent" 坐标如何工作？

Question

我正在尝试向圆圈添加拖动并尝试应用 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 工作原理的详细解释？边界是怎么从坐标算出来的

Answer 1

这里有一些注意事项，考虑到我过去肯定被他们绊倒过，我希望我能在这里解释清楚。

缩放范围

让我们看看缩放范围 (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>

"d3.translateExtent" 坐标如何工作？

How "d3.translateExtent" coordinate works?

javascript

zooming

d3.js