Question

我尝试使用D3绘制条形图并通过React的渲染方法渲染它。我的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;

检查页面元素显示svg元素正在为BarChart.js中规定的维度进行渲染，但该函数没有占用＆＃34; size＆＃34;参数传递。

此外，通过以下错误对开发人员工具做出反应，

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

任何人都可以了解我做错了什么，以及如何解决这个问题？非常感谢提前。

Answer 1

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

select(node).selectAll('rect')

而不是

select(node).select('div')

不知何故，代码放错了地方。 D3中的 selectAll 选择提供给它的所有匹配关键字作为参数，在本例中为＆＃39; rect＆＃39;。 SVG应该使用提供的矩形绘制。而且必须要呈现这一点。

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

未捕获的TypeError：无法读取属性＆＃39; ownerDocument＆＃39; of null - ReactJS

1 个答案: