diff --git a/src/coordinate-grid-mixin.js b/src/coordinate-grid-mixin.js index 16611ff18..323649b92 100644 --- 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 index 94497adfd..52cfcf3c8 100644 --- 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 index a0734a6d9..45790b818 100644 --- 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();