javascript - 具有有限高度和宽度的 D3 SVG

Question

我想创建工作空间，其中必须使用固定宽度和高度的 D3 SVG。通常，此 svg 在两个维度上都是无限的。在下面的示例中，圆形元素可以拖动到视口(viewport)中的任何位置(甚至在外部)。

fiddle 链接: https://jsfiddle.net/313vhqdx/

var container = d3.select("body")
                .append("svg")
                  .attr("id", "svgcontainer")
                  .attr("width", 300)
                  .attr("height", 300)
                  .style("background-color", "blue")
                  .call(zoom)
                .append("g");

但在我的例子中，我需要为 SVG 设置固定的宽度和高度。可能吗？

Answer 1

不，SVG 本身在概念上总是具有无限坐标。但在 d3 中，自版本 4 以来，您可以使用 zoom.translateExtent 轻松限制缩放/拖动:

var zoom = d3.zoom()
    .translateExtent([[-100, -100], [400, 400]])
    .scaleExtent([0, 2])
    .on("zoom", function () {
        container.attr("transform", d3.event.transform);
    });

由于 jsfiddle 只加载 d3 版本 3，这里是一个 CodePen .