Как в React D3 визуализацию запихнуть?

Question

[Ninja Mate]

Столкнулся с тем, что все библиотеки D3 React (попробовал 5 за сегодня), не выполняют и половины нужных функций, даже если написано что выполняют, то просто не работают. Банально нельзя задать цвета.
Решил использовать родную D3.js
Встал вопрос как это провернуть. D3 Dom мутирует, а реакт нет... Создать отдельный js для d3 и подключать по require.insere?
Если есть такой опыт, то прошу поделиться.

Answer 1

[Никита Гущин]

Создаете реакт-элемент, который будет контейнером. После didMount работаете с DOM внутри этого компонента

class MyD3Component extends Component {
  componenDidMount() {
    ReactDOM.findDOMNode(this.refs.container) // для d3
  }
  
  render() {
    return <div ref="container" />
  }
}

Comments

[Ninja Mate]

а как быть с подключением d3 скрипта?

[Никита Гущин]

Ninja Mate:
npm install --save d3;
import d3 from 'd3'

[Никита Гущин]

Ninja Mate: как и обычный пакет

[Ninja Mate]

Никита Гущин: спасибо, завтра займусь)

[Aves]

Никита Гущин: а зачем ReactDOM.findDOMNode(this.refs.container)? this.refs же и так инстансы компонентов содержат - DOMNode, которые ReactDOM.render создаёт.

[Никита Гущин]

Aves: хм. Я не уверен, так как не часто использую, но - https://facebook.github.io/react/blog/2015/10/07/r... :

tarting with this release, this.refs.giraffe is the actual DOM node.
Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.

Т.е. в нашем случае не нужно. Ninja Mate примите во внимание.

[Aves]

примерчик

[Ninja Mate]

Никита Гущин: Aves: Как интересно будет происходить componentWillUnmount и нужно ли что то разрушать, когда пользователь уходит со страницы или все само обработается?
все таки у них разный механизм взаимодействия с дом. если все элементы рендерить внутри "container", а если не все и происходит обращение к другим div, нужно ли в этих двух случиях ставить что то на Unmount?

[Aves]

Ninja Mate: мне с d3 не приходилось работать, но думаю, при удалении контейнера сборщик мусора подчистит то, что он содержал, а внешние нужно удалять вручную из componentWillUnmount. Вообще, внешние совсем делать не стоит.

[Ninja Mate]

Aves: Если не сложно, то покажите как в вашем примере можно создать div и в него уже зарендерить другой элемент

// ref == findDOMNode

import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';

class Test extends Component {
  componentDidMount() { ref = this.refs.TestInstance; }
  render() { return <p>Hi</p>; }
},

class App extends Component {
  
  componentDidMount() { ref = this.refs.instance; }
  render() { 
    
    return (
    <Test/>//?
    <div id="chart" />
    
  ); }
}

let ref;
const instance = render(<App />, document.querySelector('#app'));

const TestInstance = render(<Test />, document.querySelector('#chart'));

[Aves]

Ninja Mate: пример про другое, сравнение refs и findDOMNode. Выше я не совсем правильно написал, истанс - это отрендеренный компонент, экземпляр класса, а в refs находятся DOM-элементы инстанса. Не думаю, что непосредственно с инстансом стоит работать.
Делать нужно практически как Никита Гущин написал в ответе, только без findDOMNode - пример

[Ninja Mate]

Aves: как то у меня криво получается, если див уже есть в дом, по рендерится нормально, а если создаем виртуальный, то ничего не рендерится.

class Report extends Component {
    componentDidMount() {
        const svg = d3.select(this.refs.container)
    }

    render() { <div ref='container' />;}
}

 Reports extends Component {
    componenDidMount() {
//я правильно понимаю, что мне можно создать div и туда рендерить элемент?
        render(<Report/>, document.getElementById('test'));
        //render(<Report/>, document.querySelector('#test'));
    }

    render() {  return (
            <div>
                <h2>Reports</h2>
                <div id="test" ></div>
            </div>
        );}}

[Aves]

Ninja Mate: render нужно вызывать только для корневого компонента, в Reports просто сделать

Reports extends Component {
  render() {
    return <div>
      <h2>Reports</h2>
      <Report />
    </div>;
  }
}

[Ninja Mate]

Aves: извиняюсь, протупил) нужно учить мат часть. спасибо

[Ninja Mate]

Aves: Никита Гущин: За сегодня у меня сложилось впечатление, что я ну очень тупой. и это печально.
Почему я не могу импорт элемента сделать?

//Вот элемент
import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';
import d3 from 'd3';

class ENGChart extends Component {

    constructor(...args) {
        super(...args);

        this.state = {};
    }
        
    componentDidMount() {
        const svg = d3
            .select(this.refs.container)
            .append('svg')
            .attr('width', 400)
            .attr('height', 400);
    render() {
        return (
            <div ref='container'>
            </div>
        );
    }
}
export default ENGChart;

В одном если файле находится этот же код, только без импорта, то все работает. Если я его выношу и пытаюсь импортировать (все способы попробовал), то Element type is invalid

[Aves]

Ninja Mate: закрывающей фигурной скобки вроде не хватает в componentDidMount? В остальном должно работать.

[Ninja Mate]

Aves: Есть она, я код обрезал не аккуратно. Но! все дело в скобках!

//так работает
import ENGChart from './ENGChart';
//так не работае, хотя так все импортирую
import {ENGChart} from './ENGChart';

просто не верится, что я целый день с этим упражнялся.

[Никита Гущин]

Ninja Mate: вы экспортируете как дефолт - export default ENGChart . Значит и импортировать надо как дефолт.