define([
  './axis'
],
function (Axis) {

  var XAxis = Axis.extend({

    classed: 'x-axis',
    position: 'bottom',
    orient: 'bottom',
    offsetY: 8,
    tickPadding: 6,
    render: function () {
      Axis.prototype.render.apply(this, arguments);
      if (this.useEllipses) {
        this.ellipsifyAxisLabels();
      }
    },
    ellipsifyAxisLabels: function() {

      // Manually add ellipses to x-axis labels if they are longer than the
      // space allocated for each data item.
      // We do this by hand with D3, because SVG text elements don't support
      // CSS ellipsis styles or line breaks.
      var labels = d3.selectAll('.x-axis .tick text');
      if (!this.svg) {
        this.svg = d3.select('svg'); // For unit tests.
      }
      var svgWidth = this.svg.style('width').replace('px','');
      var blockWidth = svgWidth / this.collection.first().get('values').length;

      labels.each(function() {

        if (d3.select(this).attr('original-text') === null) {
          d3.select(this).attr('original-length-px', this.getComputedTextLength());
          d3.select(this).attr('original-text', d3.select(this).text());
        }

        var textLength = d3.select(this).attr('original-length-px');
        var text = d3.select(this).attr('original-text');

        if (textLength > (blockWidth)) {
          var percentTooLong = blockWidth / textLength;
          var lastChar = (text.length * percentTooLong) - 3;
          d3.select(this).text(text.substring(0,lastChar) + "…");
        } else {
          d3.select(this).text(text);
        }

      });
    },

    getScale: function () {
      return this.scales.x;
    },

    onChangeSelected: function (groupSelected, groupIndexSelected, modelSelected, indexSelected) {
      var ticks = this.componentWrapper.selectAll('.tick');
      ticks.classed('selected', false);

      if (indexSelected != null) {
        d3.select(ticks[0][indexSelected]).classed('selected', true);
      }
    },

    configs: {
      hour: {
        ticks: [d3.time.hour.utc, 6],
        tickFormat: function () {
          return _.bind(function (d, index) {
            var date = this.getMoment(d);
            if (date.hours() === 0) {
              return 'midnight';
            } else if (date.hours() === 12) {
              return 'midday';
            } else {
              return this.getMoment(d).format('ha');
            }
          }, this);
        }
      },
      day: {
        ticks: [d3.time.mondays.utc, 1],
        tickFormat: function () {
          return _.bind(function (d, index) {
            return this.getMoment(d).format('D MMM');
          }, this);
        }
      },
      week: {
        ticks: [d3.time.mondays.utc, 1],
        tickFormat: function () {
          return _.bind(function (d, index) {
            return this.getMoment(d).format('D MMM');
          }, this);
        }
      },
      month: {
        ticks: [d3.time.month.utc, 1],
        tickFormat: function () {
          return _.bind(function (d, index) {
            var val = this.getMoment(d).format('MMM');
            if (d.getMonth() === 0) {
              val += " " + this.getMoment(d).format('YYYY');
            }
            return val;
          }, this);
        }
      }
    }
  });

  return XAxis;
});

@@ -2,16 +2,31 @@
 efine(%5B%0A
+  'd3loader!',%0A
   './axi
@@ -41,16 +41,20 @@
 nction (
+d3, 
 Axis) %7B%0A
@@ -83,16 +83,29 @@
 tend(%7B%0A%0A
+    d3: d3,%0A%0A
     clas
@@ -2046,32 +2046,91 @@
 %7B%0A        ticks:
+ function () %7B%0A          var d3 = this.d3;%0A          return
  %5Bd3.time.hour.u
@@ -2135,16 +2135,27 @@
 .utc, 6%5D
+;%0A        %7D
 ,%0A      
@@ -2564,32 +2564,91 @@
 %7B%0A        ticks:
+ function () %7B%0A          var d3 = this.d3;%0A          return
  %5Bd3.time.monday
@@ -2648,32 +2648,43 @@
 .mondays.utc, 1%5D
+;%0A        %7D
 ,%0A        tickFo
@@ -2862,32 +2862,91 @@
 %7B%0A        ticks:
+ function () %7B%0A          var d3 = this.d3;%0A          return
  %5Bd3.time.monday
@@ -2946,32 +2946,43 @@
 .mondays.utc, 1%5D
+;%0A        %7D
 ,%0A        tickFo
@@ -3169,16 +3169,75 @@
   ticks:
+ function () %7B%0A          var d3 = this.d3;%0A          return
  %5Bd3.tim
@@ -3251,16 +3251,27 @@
 .utc, 1%5D
+;%0A        %7D
 ,%0A      

Fix client-side error (D3 not loaded) in old IE