title: Enable scroll on the axis of D3 chart
body: <p>I have a simple stacked bar chart :
  The code is <a href="http://codepen.io/anon/pen/rVVLXY" rel="nofollow">here</a>.</p>
  
  <p>I would like to have scroll-bar on the axis but as you can see in the link the scroll appears for the div container with the help of CSS.<br>
  But i need something like this <a href="http://i.stack.imgur.com/hSRhc.png" rel="nofollow">chart with scroll</a>!</p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
         &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'&gt;
         &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
         &lt;script src="https://ajax.goquery.min.js"&gt;&lt;/script&gt;
         &lt;style&gt;
          .axis path,
          .axis line {
            fill: none;
            stroke: #BDBDBD;
          }
         .axis text {
           font-family: 'Open Sans regular', 'Open Sans';
           font-size: 13px;
         }
         .y.axis{
           direction: ltr;
         }
        .grid .tick {
          stroke: lightgrey;
          opacity: 0.7;
        }
       .grid path {
         stroke-width: 0;
       }
       .rect {
         stroke: lightgrey;
         fill-opacity: 0.6;
       }
       .wrapperDiv {
       Width: 984px;
       height:  35px;
       border: thin solid black;
       #margin-top: 36px;
       #margin-bottom: 48px;
       #margin-right: 20px;
       #margin-left: 0px;
       }
       .divChart {
       float:left;
       font-size:13px;
       color : #424242;
       font-family: 'Open Sans regular', 'Open Sans';
       #border: thin solid white;
       margin-top: -0px;
       #margin-bottom: 48px;
       #margin-right: 150px;
       margin-left: 50px;
       #background-color: lightgrey;
       width: 984px;
       height: 500px;
       #padding: 25px;
       border: thin solid navy;
       #margin: 25px;
       #max-height:500px;
       overflow-y:scroll;
       direction: rtl;
       }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="divChart" id="wrapper-chart"&gt;
       &lt;div id ="chartID" &gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;&lt;script&gt;  
    &lt;script&gt;       
       var dataset = [{"key":"Completion","values":[{"name":"Module 1","value":0},{"name":"Module 2","value":0},{"name":"Module 3","value":0},{"name":"Module 4","value":0},{"name":"Module 5","value":0},{"name":"Module 6","value":0},{"name":"Module 7","value":0},{"name":"Module 8","value":0.56},{"name":"Module 9","value":13.24},{"name":"Module 10","value":12.66}]},{"key":"NonCompletion","values":[{"name":"Module 1","value":100},{"name":"Module 2","value":100},{"name":"Module 3","value":100},{"name":"Module 4","value":100},{"name":"Module 5","value":100},{"name":"Module 6","value":100},{"name":"Module 7","value":100},{"name":"Module 8","value":99.44},{"name":"Module 9","value":86.76},{"name":"Module 10","value":87.34}]}]; 
  
       function intChart(chartID, dataset) {
  
       var margins = {top: 20, right: 20, bottom: 30, left: 120};
       var width = 880 - margins.left -margins.right;
       var height =  5250- margins.top - margins.bottom;
       var old_width = width,old_height= height;
       var module_fixed = 80;
  
       height = Math.floor((dataset[0].values.length * height)/module_fixed)
  
       var x = d3.scale.ordinal().rangeRoundBands([0, width], .1,.1)
       var y = d3.scale.linear().rangeRound([height, 0], .1);
       var series = dataset.map(function(d) {
           return d.key;
       });
  
       dataset = dataset.map(function(d) {
       return d.values.map(function(o, i) {
          // Structure it so that your numeric
          // axis (the stacked amount) is y
          return {
              y: o.value,
              x: o.name
          };
       });
       });
       var stack = d3.layout.stack();
       stack(dataset);
       var dataset = dataset.map(function(
       group) {
       return group.map(function(d) {
          // Invert the x and y values, and y0 becomes x0
          return {
              x: d.y,
              y: d.x,
              x0: d.y0
          };
       });
       });
  
       var xMax = d3.max(dataset, function(
       group) {
       return d3.max(group, function(d) {
          return d.x + d.x0;
       });
       });
       var xScale = d3.scale.linear()
       .domain([0, xMax])
       .range([0, width]);
       var moduleName = dataset[0]
       .map(function(d) {
          return d.y;
       });
  
       var yScale = d3.scale.ordinal()
       .domain(moduleName)
       .rangeRoundBands([height,0]); 
  
       var svg = d3.select('#chartID')
       .append('svg')
       .attr("width", width + margins.left +
          margins.right)
       .attr("height", height + margins.top +
          margins.bottom)
       .append('g')
       .attr('transform', 'translate(60,' + margins.top +
          ')');
       var xAxis = d3.svg.axis()
       .scale(xScale)
       .orient('bottom')
       .ticks(2)
       .tickSize(0)
       .tickPadding(20)
       .tickFormat(function(d) {
          return d + "%";
       });
  
  
       var yAxis = d3.svg.axis()
       .scale(yScale)
       .orient('left')
       .tickSize(0);
       var colours = d3.scale.ordinal().range(
       ["#8bc34a", "#ff8a65"]);
  
       var groups = svg.selectAll('g')
       .data(dataset)
       .enter()
       .append('g').attr('class', 'stacked')
       .style('fill', function(d, i) {
          return colours(i);
       });
  
       var rects = groups.selectAll(
          'stackedBar')
       .data(function(d, i) {
          return d;
       })
       .enter()
       .append('rect')
       .attr('class', 'stackedBar')
       .attr('x', function(d) {
          return xScale(d.x0);
       })
       .attr('y', function(d, i) {
          return yScale(d.y);
       })
  
       .attr('height', 48)
       .attr('width', 0)
  
       rects.transition()
       .delay(function(d, i) {
          return i * 50;
       })
       .attr("x", function(d) {
          return xScale(d.x0);
       })
       .attr("width", function(d) {
          return xScale(d.x);
       })
       .duration(3000);
       //Added
       x.domain(dataset.map(function(d) {
       return d.value;
       }));
       y.domain([0, d3.max(dataset, function(
       d) {
       return d.name;
       })]);
  
       svg.append('g')
       .attr('class', 'x axis')
       .attr('transform', 'translate(0,' +height + ')')
       .call(xAxis)
       .append("text")  
       .attr("transform", "rotate(360)")
       .attr("y",10)
       .attr("x", 140)
       .attr("dy", ".30em")
       .text("Percentage of Students");
  
       svg.append('g')
       .attr('class', 'y axis')
       .call(yAxis)
       .selectAll("text")
       .style("text-anchor", "end")
       .attr("dx", "-.5em")
       .attr("dy", ".15em")
       .attr("y", "-")
       .attr("opacity", 1)
       .attr("transform", function(d) {
          return "rotate(-40)"
       })
  
  
       // Draw Y-axis grid lines
          svg.selectAll("line.y")
            .data(y.ticks(2))
            .enter().append("line")
            .attr("class", "y")
            .attr("x1", 0)
            .attr("x2", 450)
            .attr("y1", y)
            .attr("y2", y)
            .style("stroke", "#ccc"); 
       }  
  
       $(document).ready(function(){
  
       intChart("chartID", dataset);
  
       });
  
  
    &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Would appreciate any help. 
  Thanks in advance. </p>