javascript - React 在 body 外渲染 d3 图表

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

我正在获取 div 的 ref，然后在 componentDidMount() 中。我附加了生成基本条形图的 div。现在，当我运行这段代码时，我看到了条形图，但它呈现在 HTML 主体之外。我想我没有正确使用 ref 。如何获取体内的图表？

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