[Solved]-X axis label not displayed in bar chart with scroll and zoom feature - d3js, Brushing-d3.js

var nesteddata;

var main_margin = {
    top: 25,
    right: 80,
    bottom: 60,
    left: 70
  },

  width = 900 - main_margin.left - main_margin.right,
  mini_x_height = 10;
main_height = 525 - main_margin.top - main_margin.bottom,

  mini_x_margin = {
    top: main_height,
    right: main_margin.right + 10,
    bottom: main_margin.bottom,
    left: main_margin.left + 10
  },

  mini_x_width = 900 - mini_x_margin.left - mini_x_margin.right,

  mini_y_margin = {
    top: main_margin.top + 10,
    right: 0,
    bottom: main_margin.bottom + 10,
    left: 0
  },
  mini_y_width = 10,
  mini_y_height = 525 - mini_y_margin.top - mini_y_margin.bottom;


var color = d3.scale.category10();

// x0 is the groups scale on the x axis.
var main_x0 = d3.scale.ordinal().rangeroundbands([0, width], 0.2);
var mini_x0 = d3.scale.ordinal().rangeroundbands([0, width], 0.2);

var main_xzoom = d3.scale.linear()
  .range([0, width])
  .domain([0, width]);

// x1 is the series scale on the x axis.
var main_x1 = d3.scale.ordinal();
var mini_x1 = d3.scale.ordinal();

// y is the value scale on the y axis.
var main_y0 = d3.scale.linear().range([main_height, 0]);

var mini_y0 = d3.scale.linear().range([mini_y_height, 0]);

var main_xaxis = d3.svg.axis()
  .scale(main_x0)
  .orient("bottom");

var mini_xaxis = d3.svg.axis()
  .scale(mini_x0)
  .orient("bottom");

var main_yaxis = d3.svg.axis()
  .scale(main_y0)
  .orient("left");

var mini_yaxis = d3.svg.axis()
  .scale(mini_y0)
  .orient("left");

var svg = d3.select("#chart").append("svg")
  .attr("width", width + main_margin.left + main_margin.right)
  .attr("height", main_height + main_margin.top + main_margin.bottom);

var main = svg.append("g")
  .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

main.append("defs").append("clippath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", main_height + mini_x_height + main_margin.bottom);

var mini_x = svg.append("g")
  .attr("transform", "translate(" + mini_x_margin.left + "," + (main_margin.top + main_height) + ")")
  .attr("width", mini_x_width);

var mini_y = svg.append("g")
  .attr("width", mini_y_width)
  .attr("transform", "translate(" + (main_margin.left - mini_y_width) + ", " + mini_y_margin.top + ")")
  .attr("height", mini_y_height);

var data = [{
  key: 'mechanical',
  values: [{
    key: 'gear',
    value: 11
}, {
    key: 'bearing',
    value: 8
  }, {
    key: 'motor',
    value: 3
  }, {
    key: 'bearing',
    value: 8
  }, {
    key: 'motor',
    value: 3
  }, {
    key: 'bearing',
    value: 8
  }, {
    key: 'motor',
    value: 3
  }]
}, {
  key: 'electrical',
  values: [{
    key: 'switch',
    value: 19
  }, {
    key: 'plug',
    value: 12
  }, {
    key: 'cord',
    value: 11
  }, {
    key: 'fuse',
    value: 3
  }, {
    key: 'bulb',
    value: 2
  }]
}, {
  key: 'hydraulic',
  values: [{
    key: 'pump',
    value: 4
  }, {
    key: 'leak',
    value: 3
  }, {
    key: 'seals',
    value: 1
  },{
    key: 'switch',
    value: 19
  }, {
    key: 'plug',
    value: 12
  }, {
    key: 'cord',
    value: 11
  }, {
    key: 'fuse',
    value: 3
  }, {
    key: 'bulb',
    value: 2
  }]
}];


var res = [];

data.foreach(function(d){ 
  res.push(d.values.map(function(o){
    o.item=o.key; 
    o.subject = d.key; return o; }));
});

data = [].concat.apply([], res);
res.sort(function(a,b){ return a.subject<b.subject });

//console.log(data);

  var seriesvalues = d3.set(data.map(function(x) {
    return x.item;
  })).values().sort(d3.ascending);

  nesteddata = d3.nest()
    .key(function(d) {
      return d.subject;
    })
    .sortkeys(d3.ascending)
    .sortvalues(function(a, b) {
      return a.item - b.item;
    })
    .entries(data);

  var groupvalues = d3.set(data.map(function(x) {
    return x.subject;
  })).values();

  // define the axis domains
  main_x0.domain(groupvalues);
  mini_x0.domain(groupvalues);

  main_x1.domain(seriesvalues).rangeroundbands([0, main_x0.rangeband()], 0);
  mini_x1.domain(seriesvalues).rangeroundbands([0, main_x0.rangeband()], 0);

  main_y0.domain([0, d3.max(nesteddata, function(d) {
    return d3.max(d.values, function(d) {
      return d.value;
    });
  })]);
  mini_y0.domain(main_y0.domain());

  var xbrush = d3.svg.brush().x(mini_x0).on("brush", xbrushed);
  var ybrush = d3.svg.brush().y(mini_y0).on("brush", ybrushed);

  // add the x axis
  main.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (main_height + mini_x_height) + ")")
    .attr("clip-path", "url(#clip)")
    .call(main_xaxis)
    .selectall(".tick text")
    .call(wrap, main_x0.rangeband());

  // add the y axis
  main.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (-mini_y_width) + ", 0)")
    .call(main_yaxis)
    .append("text")
    .attr("transform", "rotate(-90), translate(" + -(main_height / 2) + ", " + -(mini_y_width + main_margin.left - 20) + ")")
    .attr("dy", ".71em")
    .style("text-anchor", "middle")
    .text("value");

  var x_arc = d3.svg.arc()
    .outerradius(mini_x_height / 2)
    .startangle(0)
    .endangle(function(d, i) {
      return i ? -math.pi : math.pi;
    });

  var brush_x_grab = mini_x.append("g")
    .attr("class", "x brush")
    .call(xbrush);

  brush_x_grab.selectall(".resize").append("path")
    .attr("transform", "translate(0," + mini_x_height / 2 + ")")
    .attr("d", x_arc);

  brush_x_grab.selectall("rect").attr("height", mini_x_height);

  var y_arc = d3.svg.arc()
    .outerradius(mini_y_width / 2)
    .startangle(-(math.pi / 2))
    .endangle(function(d, i) {
      return i ? -((3 * math.pi) / 2) : ((math.pi) / 2);
    });

  var brush_y_grab = mini_y.append("g")
    .attr("class", "y brush")
    .call(ybrush);

  brush_y_grab.selectall(".resize").append("path")
    .attr("transform", "translate(" + (mini_y_width / 2) + ", 0)")
    .attr("d", y_arc);

  brush_y_grab.selectall("rect").attr("width", mini_y_width);

  // create the main bars
  var bar = main.selectall(".bars")
    .data(nesteddata)
    .enter().append("g")
    .attr("clip-path", "url(#clip)")
    .attr("class", function(d) {
      return d.key + "-group bar";
    });

  bar.selectall("rect")
    .data(function(d) {
      return d.values;
    })
    .enter().append("rect")
    .attr("class", function(d) {
      return d.item;
    })
    .attr("transform", function(d) {
      return "translate(" + main_x0(d.subject) + ",0)";
    })
    .attr("width", function(d) {
      return main_x1.rangeband();
    })
    .attr("x", function(d) {
      return main_x1(d.item);
    })
    .attr("y", function(d) {
      return main_y0(d.value);
    })
    .attr("height", function(d) {
      return main_height - main_y0(d.value);
    })
    .style("fill", function(d) {
      return color(d.item);
    });


  // draws the series items onto a legend
  var legend = svg.selectall(".legend")
    .data(seriesvalues.slice())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(50," + (main_margin.top + (i * 20)) + ")";
    });

  legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

  legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });

  // called to re-draw the bars on the main chart when the brush on the x axis
  // has been altered.
  function xbrushed() {
    var originalrange = main_xzoom.range();
    main_xzoom.domain(xbrush.empty() ? originalrange : xbrush.extent());
    main_x0.rangeroundbands([main_xzoom(originalrange[0]), main_xzoom(originalrange[1])], .1);

    main_x1.rangeroundbands([0, main_x0.rangeband()], 0);

    bar.selectall("rect")
      .attr("transform", function(d) {
        return "translate(" + main_x0(d.subject) + ",0)";
      })
      .attr("width", function(d) {
        return main_x1.rangeband();
      })
      .attr("x", function(d) {
        return main_x1(d.item);
      });

    main.select("g.x.axis").call(main_xaxis).selectall(".tick text").call(wrap, main_x0.rangeband());
  };

  // called to re-draw the bars on the main chart when the
  // brush on the y axis has been altered.
  function ybrushed() {
    main_y0.domain(ybrush.empty() ? mini_y0.domain() : ybrush.extent());

    bar.selectall("rect")
      .attr("y", function(d) {
        return main_y0(d.value);
      })
      .attr("height", function(d) {
        return main_height - main_y0(d.value);
      });

    main.select("g.y.axis").call(main_yaxis);
  };

  // this comes from the example at http://bl.ocks.org/mbostock/7555321
  // for wrapping long axis tick labels
  function wrap(text, width) {
    text.each(function() {
      var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        linenumber = 0,
        lineheight = 1.1, // ems
        y = text.attr("y"),
        dy = parsefloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
      while (word = words.pop()) {
        line.push(word);
        tspan.text(line.join(" "));
        if (tspan.node().getcomputedtextlength() > width) {
          line.pop();
          tspan.text(line.join(" "));
          line = [word];
          tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++linenumber * lineheight + dy + "em").text(word);
        }
      }
    });
  };

  // set the initial brush selections.
  // svg.select(".x.brush").call(xbrush.extent(main_xzoom.domain()));
  svg.select(".x.brush").call(xbrush.extent([0, 610]));
  svg.select(".y.brush").call(ybrush.extent(mini_y0.domain()));

  // forces a refresh of the brushes and main chart based
  // on the selected extents.
  xbrushed();
  ybrushed();

//});

g.axis path,
g.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispedges;
}
g.brush rect.extent {
  fill-opacity: 0.2;
}
.resize path {
  fill-opacity: 0.2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>