使 D3 小部件可滚动

Question

我将 D3 树小部件粘贴到我的网络应用程序中。它会培养孩子并将它们附加到树上。然而，当树变得太大时，它开始离开页面。这很好，因为我不想让单个树节点变得太小，但如果我可以添加一个滚动条会很好。但是，我尝试过以正常方式进行操作，overflow: auto，但它不起作用。也许这与 D3 svg 的东西有关。

这是具有 2 个节点的树的代码：

<div id="Graph">
  <svg width="100%" height="10%" id="SVG" overflow="auto" display="block">
    <g transform="translate(40,0)">
      <path class="link" d="M0,20C213.75,20 213.75,20 427.5,20"></path>
      <g class="node" transform="translate(427.5,20)">
        <circle r="4.5" style="fill: rgb(255, 255, 255);"></circle>
        <text x="10" dy=".35em" text-anchor="start" style="fill-opacity: 1;">1</text>
      </g>
      <g class="node" transform="translate(0,20)">
        <circle r="4.5" style="fill: rgb(255, 255, 255);"></circle>
        <text x="-10" dy=".35em" text-anchor="end" style="fill-opacity: 1;">0</text>
      </g>
    </g>
  </svg>
</div>

一旦超过 10 或 11 个节点，它就会消失在屏幕上。我该如何解决这个问题？

Answer 1

使 svg 元素的宽度 > 100%。这将溢出 div 并且 div 将是可滚动的。您可能还需要设置溢出样式以在 <div> 上滚动