react-d3 using dates as the x axis

Question

When running a simple test using react-d3 I get the error

Error: <path> attribute d: Expected number, "MNaN,0Z".

My best guess is that the problem arises when dealing with my x axis, but I'm not sure why. I know from debugging that when x and y are parsed, they are parsed correctly as a Date object and -127 respectively. But somewhere when the actual svg is being built, the value it receives for x or y, not sure which, is MNaN, 0Z

// Default state from the reducer function
const defaultState = {
  title: 'GeoThermal - Cabin',
  xScale: 'time',
  xDomain: 'created_at',

  chartSeries: [
    {
      field: 'field1',
      name: 'temp1'
    },

    {
      field: 'field2',
      name: 'temp2'
    },

    {
      field: 'field3',
      name: 'temp3'
    },

    {
      field: 'field4',
      name: 'temp4'
    },

    {
      field: 'field5',
      name: 'temp5'
    }
  ],
  chartData: [{
    created_at: formatDate(new Date()),
    entry_id: 0,
    field1: '-127.0',
    field2: '-127.0',
    field3: '-127.0',
    field4: '-127.0',
    field5: '-127.0'
  }],
  lastQueryTime: new Date(),
  scale: '30 Days' 
};

// Graph Smart Component
class Graph extends Component {
    render() {
      return <GraphView
        chartData={this.props.chartData}
        chartSeries={this.props.chartSeries}
        x={(d) => d3.time.format('%Y-%m-%dT%H:%M:%SZ').parse(d.created_at)}
        y={(field) => parseFloat(field)}
        xScale={this.props.xScale}
        xDomain={this.props.xDomain}
        title={this.props.title}
      />;
    }
}
export default connect(...)(Graph)

//Graph dumb component
export default class GraphView extends Component {
  static propTypes = {
    chartData: PropTypes.object.isRequired,
    chartSeries: PropTypes.object.isRequired,
    title: PropTypes.string.isRequired,
    x: PropTypes.func.isRequired,
    xDomain: PropTypes.string.isRequired,
    xScale: PropTypes.string.isRequired,
    y: PropTypes.func

  };

  render() {
    return (
      <div className="graph">
        <LineZoom
          title={this.props.title}
          data={this.props.chartData}
          width={800}
          height={600}
          chartSeries={this.props.chartSeries}
          x={this.props.x}
          xDomain={this.props.xDomain}
          xScale={this.props.xScale}
          y={this.props.y}
        />
      </div>
    );
  }
}

Answer 1

I used the "domain" prop instead of "xDomain". This prop requires an object, not a string:

domain={{
  x: [minDate, maxDate], 
  y: [minY, maxY]
}}

where minDate and maxDate are date Objects.