React отображает диаграммы d3 вне тела

Question

Я пытаюсь создать тестовую среду для работы на D3, используя React,

Я использую следующий код:

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 для divа затем в componentDidMount(), Я добавляю div который генерирует базовую гистограмму. Теперь, когда я запускаю этот код, я вижу гистограмму, но она отображается вне тела HTML. Я думаю, я не использую ref правильно. Как я могу получить диаграмму внутри тела?

Answer 1

Ваш селектор d3 должен найти элемент по имени класса, а не по ссылке Реакт.

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