javascript - “d3.translateExtent”坐标如何工作？

jsfiddle DEMO

我正在尝试向圆添加阻力，并尝试应用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上调用zoom，因此默认范围应为[0,0],[width,height]，这里的宽度和高度分别为500。

您的翻译范围[100,100],[400,400]小于缩放范围，这在Mike Bostock的类似问题上无法解决:“问题是您指定的translateExtent小于缩放范围。因此无法满足请求的约束。” (d3-zoom issue tracker)。

TranslateExtent

然后的问题是您使用的翻译范围不正确。您指定的平移范围是希望圆约束的范围。但这不等于平移范围，平移范围是在缩放范围内要显示的坐标空间的边界(圆所处的世界的边界)。

让我们考虑在[100,100]处的圆，它的中心是translate(0,0)的缩放转换:它在其起始位置。这标记了希望将圆限制在其中的边界框的左上位置。此时缩放的左上坐标为[0,0]。缩放范围或视口(viewport)的右下 Angular 是[500,500]。

如果圆位于其预期移动的右下 Angular [400,400]处，则它具有translate(300,300)的变换，因为它是右移300像素，并且距其开始位置向下300像素(最初以cx/cy定位)。假定所有内容都向右和向右移动300个像素，则视口(viewport)或缩放范围的左上 Angular 现在为[-300,-300](如果缩放，则cx，cy为-300的圆的中心将位于SVG的左上 Angular )。右下 Angular 是[200,200]。

首先，当圆不能进一步向上或向左移动时，我们将显示[0,0],[500,500]的范围；当圆位于右下 Angular 时，当圆圈无法进一步向下或向右移动时，我们将显示[-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]])

我们不必扩展translationExtent即可解决仍在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>