CODEWITHSUNDEEP
javascriptd3.jssvgscroll
user2497586
user2497586

Reputation:

Making a D3 widget scrollable

I'm sticking a D3 tree widget into my web app. It grows children and appends them to the tree. However, when the tree gets to be too big, it starts to go off the page. That's fine since I don't want to the individual tree nodes to get too small, but it would be nice if I could add a scroll bar. However, I've tried doing it the normal way, overflow: auto, but it doesn't work. Maybe it's something to do with the D3 svg stuff.

Here's the code for a tree with 2 nodes:

<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>

Once it gets to be more than around 10 or 11 nodes, it goes off the screen. How can I fix this?

Upvotes: 2

Views: 601

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Make the width of the svg element > 100%. That will overflow the div and the div will be scrollable. You might also need to set the overflow style to scroll on the <div>

Upvotes: 0

Related Questions