javascript - Creating scrollbars with SVG and d3.js -

right i've used d3 create several "boxes" merely svg rectangles text:

var canvas = d3.select("body").append("svg")     .attr("width", 800)     .attr("height", 500);   //specifies drawing area each box var boxes = canvas.selectall("rect")     .data(classdata)     .enter();  boxes.append("rect")         .attr("width", boxwidth)         .attr("height", boxheight)         .attr("fill", boxcolor)         .attr("x", function (d, i) { return * 2 * boxwidth });   text.append("text")         .attr("fill", textcolor)         .attr("x", function (d, i)                { return * 2 * boxwidth + 5 })         .attr("y", 20)         .style("width", "20px")         .style("overflow-x", "scroll")         .text(function(d) {return d.name}); 

now i'd add scrollbars each box when text outside bounds of box. i've seen couple examples created div , used css handle overflow. however, have multiple (variable) boxes , i'm not sure how go this.

any suggestions?

-- update --

i able scrollbars appear appending svg elements div controls scrolling css styles.

.container {     height: 225px;     width: 175px;     border:2px solid #000;     overflow-y: scroll;     overflow-x: hidden; }  svg {     display: block;     width: 200%;     height: 200%; } 

however, scrolling seems affected width , height percentages of svg element rather rect element drawn in div. in other words, if rectangle large, still can not scroll see of it, unless increase width , height of svg element.

is there way can have div scroll based on drawn inside of it? or should try somehow calculate , change width , height attributes of svg element?

view code here

try add viewbox svg property:

var rectangle = container.append("svg")     .attr("viewbox", "0,0,150,420")     .append("rect")     .attr("width", 150)     .attr("height", 420)     .attr("fill", "steelblue")     .attr("x", 0)     .attr("y", 0); 

jsfiddle