React-Apollo \ Javascript:映射函数或逻辑可能是错误的

时间:2018-08-24 20:14:34

标签: javascript reactjs graphql react-apollo map-function

在控制台中,我看到以下数据结构。看来我正在获取数据。但是,我正在尝试使用以下类来绘制数据图形,但屏幕空白。我不确定什么是错的:map函数或类的整个逻辑。有人可以帮我解决问题,以便显示图表吗?

数据结构

 {data: {action: [{action: "Changed", timestamp: 1499348050,…},…]}}
        data:{action: [{action: "Changed", timestamp: 1499348050,…},…]}
          action:[{action: "User Assist Changed", timestamp: 1499348050,…},…]




class Graph extends React.Component {
      constructor(props) {
        super(props);

        this.state = {  startTime:this.props.startTime, 
                        endTime:this.props.endTime,
                        nodes:this.props.data
                      }
        console.log('graph data:', this.props.data)
      }

      componentDidMount() {
        this.force = d3.forceSimulation(this.state.nodes)
          .force("charge",
            d3.forceManyBody()
              .strength(this.props.forceStrength)
          )
          .force("x", d3.forceX(this.props.width / 2))
          .force("y", d3.forceY(this.props.height / 2));

        this.force.on('tick', () => this.setState({datas: this.state.nodes}));
      }

      componentWillUnmount() {
        this.force.stop();
      }

        render() {
       // console.log('graph datas:', this.props.data)
        return (

          <svg width={this.props.width} height={this.props.height}>
          {console.log('map data:', this.props.data)}
          {Object.keys(this.props.data).map((node, index) =>(
         <circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
          ))}
          </svg>
        );
      }//render
    }//Component

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

0 个答案:

没有答案