反应/胜利:该图未显示条目

时间:2018-08-31 23:04:55

标签: javascript reactjs d3.js react-apollo victory-charts

我正在努力将我的数据拟合到该胜利图上,但是由于某种原因,它并没有像预期的那样出现。我不需要y轴,但是在x轴上,我试图从最早到最新列出数据集中的条目。该组件似乎正在接收数据,但图形未按预期呈现。示例在这里https://formidable.com/open-source/victory/guides/zoom-large-data/

组件

class CustomChart extends React.Component {
  constructor(props) {
    super();
    this.entireDomain = this.getEntireDomain(props);
    this.state = {
        zoomedXDomain: this.entireDomain.x,
    };
  }
    onDomainChange(domain) {
    this.setState({
        zoomedXDomain: domain.x,
    });
  }
  getData() {
    const { zoomedXDomain } = this.state;
    const { data, maxPoints } = this.props;
    const filtered = data.action.filter(
        (action) => (action.timestamp >= zoomedXDomain[0] && action.timestamp <= zoomedXDomain[1]));

    if (filtered.length > maxPoints ) {
      const k = Math.ceil(filtered.length / maxPoints);
        return filtered.filter(
        (d, i) => ((i % k) === 0)
      );
    }
    return filtered;
  }
  getEntireDomain(props) {
    const { data } = props;
    return {
        y: [_.minBy(data.action, action => action.timestamp).timestamp, _.maxBy(data.action, action => action.timestamp).timestamp],
      x: [ data.action[0].timestamp, _.last(data.action).timestamp ]
    };
  }
  getZoomFactor() {
    const { zoomedXDomain } = this.state;
    const factor = 10 / (zoomedXDomain[1] - zoomedXDomain[0]);
    return _.round(factor, factor < 3 ? 1 : 0);
  }
    render() {
    const renderedData = this.getData();
    return (
        <div>
        <VictoryChart
          domain={this.entireDomain}
          containerComponent={<VictoryZoomContainer
            zoomDimension="x"
            onZoomDomainChange={this.onDomainChange.bind(this)}
            minimumZoom={{x: 1/10000}}
          />}
        >
          <VictoryScatter data={renderedData} />
        </VictoryChart>
        <div>
          {this.getZoomFactor()}x zoom;
          rendering {renderedData.length} of {this.props.data.length}
        </div>
      </div>
    );

  }//render


}//component


export default graphql(getObjectsQuery, 
    { options: (ownProps) => { 
      console.log('CustomChart getObjectsQuery:', ownProps.startTime); 
      return ({ second: { startTime: ownProps.startTime,
                              endTime: ownProps.endTime
            } 
        }) 
    } 
})(CustomChart);

数据 enter image description here

0 个答案:

没有答案