Row chart x axis label

dc-js · Oct 27, 2015 · c6e473b · c6e473b
1 parent f9e08c5
commit c6e473b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/src/coordinate-grid-mixin.js b/src/coordinate-grid-mixin.js
@@ -516,7 +516,6 @@ dc.coordinateGridMixin = function (_chart) {
             .attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' +
                   (_chart.height() - _xAxisLabelPadding) + ')');
 
-
         var rotate = _chart.xAxisTickLabelRotate();
         if (rotate) {
             axisXG

diff --git a/src/row-chart.js b/src/row-chart.js
@@ -21,6 +21,9 @@
  */
 dc.rowChart = function (parent, chartGroup) {
 
+    var X_AXIS_LABEL_CLASS = 'x-axis-label';
+    var DEFAULT_AXIS_LABEL_PADDING = 30;
+
     var _g;
 
     var _labelOffsetX = 10;
@@ -29,6 +32,9 @@ dc.rowChart = function (parent, chartGroup) {
     var _dyOffset = '0.35em';  // this helps center labels https://github.com/mbostock/d3/wiki/SVG-Shapes#svg_text
     var _titleLabelOffsetX = 2;
 
+    var _xAxisLabel;
+    var _xAxisLabelPadding = 0;
+
     var _gap = 5;
 
     var _fixedBarHeight = false;
@@ -83,6 +89,26 @@ dc.rowChart = function (parent, chartGroup) {
 
         dc.transition(axisG, _chart.transitionDuration())
             .call(_xAxis);
+
+        renderXAxisLabel(axisG);
+    }
+
+    function renderXAxisLabel (g) {
+        var axisXLab = g.selectAll('text.' + X_AXIS_LABEL_CLASS);
+
+        if (axisXLab.empty() && _chart.xAxisLabel()) {
+            axisXLab = g.append('text')
+                .attr('class', X_AXIS_LABEL_CLASS)
+                .attr('transform',
+                    'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) +
+                    ',' + _xAxisLabelPadding + ')'
+                )
+                .attr('text-anchor', 'middle');
+        }
+
+        if (_chart.xAxisLabel() && axisXLab.text() !== _chart.xAxisLabel()) {
+            axisXLab.text(_chart.xAxisLabel());
+        }
     }
 
     _chart._doRender = function () {
@@ -386,6 +412,31 @@ dc.rowChart = function (parent, chartGroup) {
         return _chart;
     };
 
+    _chart.xAxisLength = function () {
+        return _chart.effectiveWidth();
+    };
+
+    /**
+     * Set or get the x axis label. If setting the label, you may optionally include additional padding to
+     * the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
+     * @name xAxisLabel
+     * @memberof dc.coordinateGridMixin
+     * @instance
+     * @param {String} [labelText]
+     * @param {Number} [padding=12]
+     * @return {String}
+     */
+    _chart.xAxisLabel = function (labelText, padding) {
+        if (!arguments.length) {
+            return _xAxisLabel;
+        }
+        _xAxisLabel = labelText;
+        _chart.margins().bottom -= _xAxisLabelPadding;
+        _xAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
+        _chart.margins().bottom += _xAxisLabelPadding;
+        return _chart;
+    };
+
     /**
      * Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.
      * @name labelOffsetX

diff --git a/web/examples/row.html b/web/examples/row.html
@@ -26,6 +26,7 @@
     .height(480)
     .x(d3.scale.linear().domain([6,20]))
     .elasticX(true)
+    .xAxisLabel('Runs')
     .dimension(runDimension)
     .group(speedSumGroup)
     .render();