我正在尝试生成一个测试环境以使用 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>)
}
我正在获取 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>)
}
关于javascript - React 在 body 外渲染 d3 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35905760/