在控制台中,我看到以下数据结构。看来我正在获取数据。但是,我正在尝试使用以下类来绘制数据图形,但屏幕空白。我不确定什么是错的: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);