javascript - 未被捕获的TypeError:无法读取null的属性'ownerDocument'-ReactJS

我试图使用D3绘制条形图，并通过React的render方法进行渲染。
我的index.js如下，

import React from 'react';
import ReactDOM from 'react-dom';
import './Styles/index.css';
import BarChart from './Components/BarChart'

class App extends React.Component {
    render() {
        return (
            <div>
            <h3> SmaRT - A Dash Board</h3>
            <BarChart data={[1,3,5,7,11]} size={[500,500]}/>
            </div>
        );
    }
}

ReactDOM.render( <App/>, document.getElementById('app'))

通常，我将数据和大小传递给BarChart函数。我的BarChart.js如下，

import React from 'react';
import { scaleLinear } from 'd3-scale';
import { max } from 'd3-array';
import { select } from 'd3-selection';
import '../Styles/index.css';

class BarChart extends React.Component {
    constructor(props) {
        super(props);
        this.createBarChart = this.createBarChart.bind(this);
    }

    componentDidMount(){
        this.createBarChart();
    }

    componentDidUpdate(){
        this.createBarChart();
    }

    createBarChart() {
        const node = this.node;
        const dataMax = max(this.props.data);
        const yScale = scaleLinear().domain([0,dataMax]).range([0, this.props.size[1]]);

        select(node).select('div').data(this.props.data).enter().append('div')

        select(node).select('div').data(this.props.data).exit().remove()

        select(node).select('div').data(this.props.data).style('fill', '#FE9922').attr('x', (d,i) => i * 25).attr('y', d => this.props.size[1] - yScale(d))
        .attr('height', d => yScale(d)).attr('width', 25)
    }

    render(){
        return <svg ref={node => this.node = node} width={500} height={500}></svg>
    }
}

export default BarChart;

检查page元素显示svg元素正在为BarChart.js中指定的尺寸呈现，但是该函数未占用传递的“ size”参数。

另外，通过以下错误来响应开发人员工具，

Uncaught TypeError: Cannot read property 'ownerDocument' of null
    at new EnterNode (enter.js?19a3:9)
    at    Uncaught TypeError: Cannot read property 'ownerDocument' of null
    at new EnterNode (enter.js?19a3:9)
    at bindIndex (data.js?1427:21)
    at Selection.__webpack_exports__.a [as data] (data.js?1427:100)
    at BarChart.createBarChart (BarChart.js?1e85:26)
    at BarChart.componentDidMount (BarChart.js?1e85:14)
    at eval (ReactCompositeComponent.js?063f:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75)
    at eval (ReactCompositeComponent.js?063f:263)
    at CallbackQueue.notifyAll (CallbackQueue.js?7abf:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js?2d36:80)
    EnterNode @ enter.js?19a3:9
    bindIndex @ data.js?1427:21
    __webpack_exports__.a @ data.js?1427:100
    createBarChart @ BarChart.js?1e85:26
    componentDidMount @ BarChart.js?1e85:14
    (anonymous) @ ReactCompositeComponent.js?063f:264
    measureLifeCyclePerf @ ReactCompositeComponent.js?063f:75
    (anonymous) @ ReactCompositeComponent.js?063f:263
    notifyAll @ CallbackQueue.js?7abf:76
    close @ ReactReconcileTransaction.js?2d36:80
    closeAll @ Transaction.js?91bc:209
    perform @ Transaction.js?91bc:156
    batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
    perform @ Transaction.js?91bc:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
    batchedUpdates @ ReactUpdates.js?be0d:97
    _renderNewRootComponent @ ReactMount.js?0cc2:319
    _renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
    render @ ReactMount.js?0cc2:422
    (anonymous) @ index.jsx?cca3:17
    (anonymous) @ bundle.js:1047
    __webpack_require__ @ bundle.js:20
    (anonymous) @ bundle.js:63
    (anonymous) @ bundle.js:66
    bindIndex (data.js?1427:21)
    at Selection.__webpack_exports__.a [as data] (data.js?1427:100)
    at BarChart.createBarChart (BarChart.js?1e85:26)
    at BarChart.componentDidMount (BarChart.js?1e85:14)
    at eval (ReactCompositeComponent.js?063f:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75)
    at eval (ReactCompositeComponent.js?063f:263)
    at CallbackQueue.notifyAll (CallbackQueue.js?7abf:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js?2d36:80)
    EnterNode @ enter.js?19a3:9
    bindIndex @ data.js?1427:21
    __webpack_exports__.a @ data.js?1427:100
    createBarChart @ BarChart.js?1e85:26
    componentDidMount @ BarChart.js?1e85:14
    (anonymous) @ ReactCompositeComponent.js?063f:264
    measureLifeCyclePerf @ ReactCompositeComponent.js?063f:75
    (anonymous) @ ReactCompositeComponent.js?063f:263
    notifyAll @ CallbackQueue.js?7abf:76
    close @ ReactReconcileTransaction.js?2d36:80
    closeAll @ Transaction.js?91bc:209
    perform @ Transaction.js?91bc:156
    batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
    perform @ Transaction.js?91bc:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
    batchedUpdates @ ReactUpdates.js?be0d:97
    _renderNewRootComponent @ ReactMount.js?0cc2:319
    _renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
    render @ ReactMount.js?0cc2:422
    (anonymous) @ index.jsx?cca3:17
    (anonymous) @ bundle.js:1047
    __webpack_require__ @ bundle.js:20
    (anonymous) @ bundle.js:63
    (anonymous) @ bundle.js:66

谁能告诉我我在做什么错，如何弄清楚呢？
提前谢谢了。

最佳答案

发现错误，这是由于createBarChart函数BarChart.js中的select语句

select(node).selectAll('rect')

并不是

select(node).select('div')

不知何故，代码被放错了地方。 D3中的selectAll选择提供给它的所有匹配关键字作为参数，在这种情况下为'rect'。 SVG应该使用提供的矩形来绘制。而这确实必须呈现。

感谢所有试图理解和解决/调试此问题的人。