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%;
}

Demo

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

Answer 2

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

如果您要使用谷歌，那么您的问题更多地是svg而不是约d3。

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

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

d3.js静态图形滚动

2 个答案: