1

I have created a bubble chart using d3.js. I want to make the div in which bubble chart is displayed scrollable , so that if the no of bubbles exceeds the height of div ,scrolling is enabled.

I gave overflow-y:scrollable in css. But its not working. Here is the fiddle.

What am I missing ?

salsa111
  • 171
  • 1
  • 15
  • svg cannot have scroll bars, your best bet would be to put it in a parent div container with fixed height, and make the div scrollable. something like http://stackoverflow.com/questions/8344688/how-to-get-scrollbars-in-svg – iamserious Nov 18 '15 at 09:03
  • Your example: http://jsfiddle.net/06xyo1tv/20/ - so you'll have to calculate the svg size and adjust as needed – iamserious Nov 18 '15 at 09:08
  • thanks @iamserious it worked. – salsa111 Nov 18 '15 at 09:59

1 Answers1

1

I resolved the issue by placing the svg inside a parent div.

<div class="parent">
<p id='chart'></p>
</div>

Then gave fixed height to the parent div and made it scrollable.

.parent {
height:400px;
width:400px;
overflow-y:auto;
}

Also made height of svg greater than its parent div. 

svg{
background: lightgray;
height:600px;
width:600px;    
}

Here is the fiddle.

salsa111
  • 171
  • 1
  • 15