Question

我正在尝试使用React生成一个测试环境来处理D3。

我正在使用以下代码：

componentDidMount(){
    d3.select(this._testChart)
        .data(this.state.data)
        .enter().append('div')
        .style('background-color','blue')
        .style('color', 'white')
        .style('width', d=>d*10 + 'px')
        .text(d=>d)
}

render(){
    return (<div className='TestChart' ref={(c) => this._testChart = c}>
        </div>)
}

我获得了ref的{{1}}，然后是div。我正在附加生成基本条形图的componentDidMount()。现在，当我运行此代码时，我看到了条形图，但它已经在HTML体外呈现。我想我没有正确使用div。如何将图表放入体内？

Answer 1

你的d3选择器应该按类名找到元素，而不是React ref。

componentDidMount(){
    d3.select(".TestChart" )
        .data(this.state.data)
        .enter().append('div')
        .style('background-color','blue')
        .style('color', 'white')
        .style('width', d=>d*10 + 'px')
        .text(d=>d)
}

render(){
    return (<div className='TestChart' 
        </div>)
}

React在身体外部呈现d3图表

1 个答案: