React / D3：图形将不会显示

Question

在另一个组件中，我毫无问题地在屏幕上显示数据的内容。但是，使用相同的数据来构建图形时遇到了问题。当我单击“提交”时，图形将显示在屏幕上，但浏览器只会崩溃。有人可以帮我弄清楚代码中是什么引起了这种感谢吗？

在控制台中，数据包含看起来像JSON文件的内容：

{data:{action:[action: "changed", timestamp: 12345678], ...}

显示组件：

class Graph extends Component {

    constructor({nodes}) {
    const times = d3.extent(nodes.action.map(action => {action.action}))
    const range = [50, 450]
    super({nodes})
    this.state = {nodes, times, range}
    }

    componentDidMount() {
        let group
        const { nodes, times, range } = this.state
        const { target } = this.refs
        const scale = d3.scaleTime().domain(times).range(range)

        d3.select(target)
            .append('svg')
            .attr('height', 200)
            .attr('width', 500)

        group = d3.select(target.children[0])
            .selectAll('g')
            .data(nodes)
            .enter()
            .append('g')
            .attr(
                'transform', 
                (d, i) => 'translate(' + scale(d.timestamp) + ', 0)'
            )

        group.append('circle')
            .attr('cy', 160)
            .attr('r', 5)
            .style('fill', 'blue')

        group.append('text')
            .text(d => d.timestamp + " - " + d.action)
            .style('font-size', 10)
            .attr('y', 115)
            .attr('x', -95)
            .attr('transform', 'rotate(-45)')

    }

    render() {
        return (
            <Graph name="Timeline"/>

        )
    }

}

export default Graph;