react-d3 使用日期作为 x 轴

Question

当运行使用 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>
    );
  }
}

Answer 1

我使用了 "domain" 道具而不是 "xDomain"。这个道具需要一个对象，而不是一个字符串：

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

其中 minDate 和 maxDate 是日期对象。

react-d3 使用日期作为 x 轴

react-d3 using dates as the x axis

d3.js

svg

redux

react-d3