d3.js静态图形滚动

d3.js static graph scrolling

本文关键字：滚动 图形 静态 js d3      更新时间：2023-09-26

我正在尝试实现以下示例

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

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

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

让svg足够大，但用overflow将其包装成一个小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%;
}

演示

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

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

如果你选择谷歌，你的问题更多的是关于svg而不是d3。

我认为唯一的可能性是使用javascript，以便在后面有一个对象时增加svg的大小。这样，我就不知道如何使它在左侧工作，这变得很复杂。

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

相关文章：