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

我使用＆＃34;域＆＃34;道具而不是＆＃34; xDomain＆＃34;。这个道具需要一个对象，而不是一个字符串：

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

其中minDate和maxDate是日期对象。

react-d3使用日期作为x轴

1 个答案: