javascript - d3.js 静态图形滚动

Question

我正在尝试实现以下示例

http://bl.ocks.org/mbostock/4566102

对于大型图表，我只希望图表不会被截断并允许滚动，一旦用户将其拖到当前边框之外。

我尝试将 overflow:scroll 属性添加到 svg 元素，但这似乎不起作用。我是这个 javascript/d3.js 编程的新手，如果有人能指出错误或指导我正确的方向，我会很高兴。

Answer 1

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

html

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

CSS：

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

演示

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

Answer 2

恐怕如果没有 javascript 干预，这将是不可能的。根svg元素必须具有定义的宽度和高度，并且它不会在任何程度上适应其内容。

如果你要去谷歌，你的问题svg不仅仅是关于d3.

我认为唯一的可能性是使用 javascript，以便增加svg一个对象在其后面时的大小。但是，通过这种方式，我无法弄清楚如何使其适用于左侧，它变得复杂。

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