javascript - 使D3小部件可滚动

我正在将D3树小部件粘贴到我的Web应用程序中。它会长出孩子并将其附加到树上。但是，当树变得太大时，它开始离开页面。很好，因为我不想让单个树节点变得太小，但是如果我可以添加滚动条，那就太好了。但是，我尝试以正常方式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个节点，它将消失。我怎样才能解决这个问题？

最佳答案

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

关于javascript - 使D3小部件可滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34621641/