javascript - Making a D3 widget scrollable -
i'm sticking d3 tree widget web app. grows children , appends them tree. however, when tree gets big, starts go off page. that's fine since don't want individual tree nodes small, nice if add scroll bar. however, i've tried doing normal way, overflow: auto, doesn't work. maybe it's d3 svg stuff.
here's code tree 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 gets more around 10 or 11 nodes, goes off screen. how can fix this?
make width of svg element > 100%. overflow div , div scrollable. might need set overflow style scroll on <div>
Comments
Post a Comment