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元素的宽度＆gt; 100％。这将溢出div，div将可滚动。您可能还需要设置溢出样式以在<div>

上滚动

使D3小部件可滚动

1 个答案: