Add ability to exclude ticks for x axis

react-d3 · Apr 11, 2016 · 5add689 · 5add689
1 parent ea978d4
commit 5add689
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/axis/axis.jsx b/src/axis/axis.jsx
@@ -21,14 +21,16 @@ export default class Axis extends Component {
     rangeRoundBands: null,
     domain: null,
     tickFormat: null,
-    tickOrient: null
+    tickOrient: null,
+    tickExclude: []
   }
 
   static PropTypes = {
     showAxis: PropTypes.bool,
     type: PropTypes.string,
     orient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
     tickOrient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    tickExclude: PropTypes.array
   }
 
   _mkTickAxis () {
@@ -94,7 +96,8 @@ export default class Axis extends Component {
       gridAxisClassName,
       axisClassName,
       type,
-      style
+      style,
+      tickExclude
     } = this.props;
 
     var axisGroup = ReactFauxDOM.createElement('g');
@@ -143,6 +146,10 @@ export default class Axis extends Component {
     axisDom.selectAll('.axis path')
       .style('display', 'none')
 
+    // Hide the specified ticks
+    axisDom.selectAll('.axis .tick')
+      .style('display', d => tickExclude.indexOf(d) > -1 ? 'none' : 'auto');
+
     var axisText = axisDom.selectAll('.axis text')
 
     if(style) {

diff --git a/src/axis/xaxis.jsx b/src/axis/xaxis.jsx
@@ -25,6 +25,7 @@ export default class Xaxis extends Component {
     xTickPadding: 3,
     xInnerTickSize: 6,
     xOuterTickSize: 6,
+    xTickExclude: [],
     ...CommonProps
   }
 
@@ -47,6 +48,7 @@ export default class Xaxis extends Component {
     xTickPadding: PropTypes.number,
     xTickFormat: PropTypes.func,
     xTicks: PropTypes.array,
+    xTickExclude: PropTypes.array,
     style: PropTypes.object
   }
 
@@ -73,7 +75,8 @@ export default class Xaxis extends Component {
       xLabel,
       xLabelPosition,
       labelOffset,
-      style
+      style,
+      xTickExclude
     } = this.props;
 
     var t;
@@ -127,6 +130,7 @@ export default class Xaxis extends Component {
           tickSizeOuter = {xTickSizeOuter}
           ticks = {xTicks}
           style = {style}
+          tickExclude = {xTickExclude}
           />
         {axisLabel}
       </g>