Javascript React在身体外渲染d3图表

我正在尝试使用

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>)
}

componentDidMount（）{
d3.选择（本测试图）
.data（此.state.data）
.enter（）.append（'div'）
.style（'背景色'，'蓝色'）
.style（'颜色'，'白色'）
.style（'width'，d=>d*10+'px'）
.text（d=>d）
}
render（）{
返回（this.\u testChart=c}>
)
}

---

我正在获取

div

的

ref

，然后在

componentDidMount（）

中。我添加了

div

，它生成了一个基本的条形图。现在，当我运行这段代码时，我看到了条形图，但它是在HTML主体之外呈现的。我想我没有正确使用

ref

。如何在主体中获取图表？

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>)
}

componentDidMount（）{
d3.选择（“测试图表”）
.data（此.state.data）
.enter（）.append（'div'）
.style（'背景色'，'蓝色'）
.style（'颜色'，'白色'）
.style（'width'，d=>d*10+'px'）
.text（d=>d）
}
render（）{
return（如何装载react组件？ReactDOM.render（，document.getElementById（'root'））；我的意思是将其附加到'root'div。这很有趣，因为在'root'div中创建了一个类名为'testChart'的div，但是附加的d3 div被附加到html主体之外