Javascript 具有有限高度和宽度的D3 SVG

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

小提琴链接：

---

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

不，SVG本身在概念上总是有无限的坐标。但在第4版之后的d3中，您可以使用

zoom.translateExtent

轻松限制缩放/拖动：

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

---

由于JSFIDLE只加载d3版本3，这里有一个问题。

我不明白您想要实现什么。是否要停止特定大小的“缩放”操作？不要停止“缩放”操作。在视口外拖动元素时，必须限制可拖动的操作。它应该只能在视口内拖动。-@这就是我需要的。目前我正在使用D3V3。是否有可能通过使用jquery功能而不是将D3V3替换为v4来实现这一点@这样做没有好处。jQuery不像d3那样支持SVG属性。您必须编写的核心内容是限制转换值的事件侦听器，无论如何，这是一个纯JS和数学任务。我不明白如何在.translateExtend（）方法中给出坐标。你能告诉我目的和如何给出坐标吗@如果[x0，y0]是世界左上角的意思，那么为什么我们给出[-100，-100]而不是[0，0]。如果我给出[0,0]，那么整个SVG维度将被折叠@ccprog

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