Javascript d3.js静态图形滚动

我正在尝试实现以下示例

对于大型图形，我只希望在用户将其拖动到当前边界之外时，图形不会被截断并允许滚动

我尝试将overflow:scroll属性添加到svg元素中，但这似乎不起作用。

---

我是javascript/d3.js编程新手，如果有人能指出错误或指导我正确的方向，我会很高兴。

如果没有javascript干预，恐怕这是不可能的。

svg

根元素必须具有定义的宽度和高度，并且它在任何程度上都不会适应其内容

如果你选择谷歌，你的问题更多的是关于

svg

，而不是关于

d3

我认为唯一的可能性是使用javascript，以便在一个对象位于它后面时增加

svg

的大小。这样一来，虽然我不知道如何让它在左侧工作，但它变得复杂了

---

我认为最好用d3提供的解决方案来解决这个问题，比如上面建议的缩放行为。一般来说，如果您是这一领域的新手，我可以建议您在开始实施之前考虑交互，从d3库中挑选示例，以便更好地了解您真正想要的是什么。

如何使svg足够大，但将其包装成一个带有溢出的小div:auto

html

---

您可以将红色圆圈从可见区域中拖出。

这是一个平移示例，您正在寻找这种类型的东西吗@理查德马尔，谢谢。这就是我想要做的，但是在静态图中。我没有看到示例中定义的拖动行为。缩放功能会自动处理吗？如果图形很大，我不想一次加载/显示所有数据怎么办？

<div class="outer">
    <div class="inner">
        <svg></svg>
    </div>
</div>

.outer {
    width: 400px;
    height: 300px;
    overflow: auto;
}
.inner {
    width: 800px;
    height: 600px;
}
svg {
    display: block;
    width: 100%;
    height: 100%;
}