react-d3 使用日期作为 x 轴答案

【问题标题】：react-d3 using dates as the x axisreact-d3 使用日期作为 x 轴
【发布时间】：2017-04-17 16:03:26
【问题描述】：

使用 react-d3 运行简单测试时出现错误

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

我最好的猜测是在处理我的 x 轴时会出现问题，但我不确定为什么。我从调试中知道，当解析x 和y 时，它们分别被正确解析为Date 对象和-127。但是在构建实际 svg 的某个地方，它收到的 x 或 y 的值，不确定是 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>
    );
  }
}

【问题讨论】：

标签： d3.js svg redux react-d3

【解决方案1】：

我使用“域”属性而不是“xDomain”。这个道具需要一个对象，而不是一个字符串：

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

其中 minDate 和 maxDate 是日期对象。

【讨论】：