Diagram d3 displayed outside bootstrap div

Question

I ran into a problem when on a d3 diagram a diagram is created outside the div area for each selectpicker selection.

var svg = d3.select("#barchart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

Full code can be found in the lower jsbin location

http://jsbin.com/sodivamiqa/edit?html,js,output

 Month,Success_Count,Failure_Count Dec,32,12 Jan,35,5 Feb,5,2 March,40,2 April,30,25 May,12,10 

Output image

Answer 1

100% will keep it inside the div.

 var svg = d3.select("#barchart").append("svg") .attr("width",'100%') .attr("height", '100%') .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");