Add options to align points for area and line shapes

src/commonProps.jsx

@@ -14,7 +14,8 @@ export default {
   xScale: 'linear',
   yScale: 'linear',
   showXGrid: true,
-  showYGrid: true
+  showYGrid: true,
+  pointAlign: 'left'
 }
 
 export const pieProps = {

src/components/area.jsx

@@ -9,12 +9,17 @@ import {
 import D3Shape from 'd3-shape'
 import CommonProps from '../commonProps';
 import {series} from '../utils/series';
+import {getTranslateXAmount} from '../utils/alignment';
 
 export default class Area extends Component {
   constructor (props) {
     super(props);
   }
 
+  static propTypes = {
+    pointAlign: PropTypes.oneOf(['left', 'center', 'right'])
+  };
+
   static defaultProps = {
     areaClassName: 'react-d3-basic__area',
     ...CommonProps
@@ -76,8 +81,16 @@ export default class Area extends Component {
   render() {
     var area = this._mkArea();
 
+    const translateXAmount = getTranslateXAmount(
+      this.props.pointAlign,
+      this.props.xScaleSet.bandwidth()
+    );
+    const style = {
+      transform: `translateX(${translateXAmount}px)`
+    };
+
     return (
-      <g>
+      <g style={style}>
         {area}
       </g>
     )

src/components/line.jsx

@@ -9,12 +9,17 @@ import {
 import D3Shape from 'd3-shape'
 import CommonProps from '../commonProps';
 import {series} from '../utils/series';
+import {getTranslateXAmount} from '../utils/alignment';
 
 export default class Line extends Component {
   constructor (props) {
     super(props);
   }
 
+  static propTypes = {
+    pointAlign: PropTypes.oneOf(['left', 'center', 'right'])
+  };
+
   static defaultProps = {
     interpolate: null,
     lineClassName: 'react-d3-basic__line',
@@ -64,8 +69,16 @@ export default class Line extends Component {
   render() {
     var line = this._mkLine();
 
+    const translateXAmount = getTranslateXAmount(
+      this.props.pointAlign,
+      this.props.xScaleSet.bandwidth()
+    );
+    const style = {
+      transform: `translateX(${translateXAmount}px)`
+    };
+
     return (
-      <g>
+      <g style={style}>
         {line}
       </g>
     );

src/utils/alignment.jsx

@@ -0,0 +1,17 @@
+"use strict";
+
+/**
+ * Get the horizontal translation amount based on point alignment.
+ * @param [pointAlign='left'] - How the points should be aligned, left, center,
+ *   or right
+ * @param bandwidth - The width of a single band of the X scale
+ * @returns {number} - How many horizontal pixels to translate
+ */
+export function getTranslateXAmount (pointAlign, bandwidth) {
+  if ( pointAlign === 'center' ) {
+    return bandwidth / 2;
+  } else if ( pointAlign === 'right') {
+    return bandwidth;
+  }
+  return 0;
+}