React-Apollo \ Javascript: функция или логика карты может быть неправильной - PullRequest
Новая
       20

React-Apollo \ Javascript: функция или логика карты может быть неправильной

0 голосов
/ 24 августа 2018

В консоли я вижу следующую структуру данных.Похоже, я получаю данные.Тем не менее, я пытаюсь построить график данных, используя следующий класс, но на экране ничего нет.Я не уверен, что не так: функция карты или вся логика класса.Может ли кто-нибудь помочь мне устранить неполадки, чтобы я мог отобразить график?

Структура данных 

 {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);
...