Czy jest jakiś właściwy sposób na integrację d3.grafika js w aplikacji Facebook React?

Tak, Wiem, że istnieje react-art, ale wydaje się, że jest zepsuty .

Problem w tym, że d3.js polega na mutowaniu Dom przeglądarki i używanie go bezpośrednio, powiedzmy wewnątrz metody componentDidMount, nie będzie działać poprawnie, ponieważ wszystkie zmiany w dom przeglądarki nie będą odzwierciedlone w wirtualnym DOM Reacta. Jakieś pomysły?

Author: couchand, 2014-02-20
Source

3 answers

Jedną ze strategii może być zbudowanie komponentu black-box, który nigdy nie pozwoli na aktualizację Reacta. Metoda cyklu życia składnika shouldComponentUpdate() ma na celu umożliwienie komponentowi samodzielnego określenia, czy konieczne jest ponowne wykorzystanie. Jeśli zawsze zwróci false z tej metody, React nigdy nie zanurzy się w elementach potomnych (chyba że wywołasz forceUpdate()), więc będzie to działać jako rodzaj zapory przeciw głębokiemu systemowi aktualizacji Reacta.

Użyj pierwszego wywołania do render(), Aby wyprodukować kontener dla wykresu, a następnie narysuj sam wykres za pomocą D3 w metodzie componentDidMount(). Następnie sprowadza się to do aktualizacji wykresu w odpowiedzi na aktualizacje komponentu Reactowego. Chociaż możesz nie przypuszczać , aby zrobić coś takiego w shouldComponentUpdate(), nie widzę prawdziwego powodu, dla którego nie możesz wywołać aktualizacji D3 stamtąd (patrz kod dla komponentu Reactowego_performUpdateIfNecessary()).

Więc twój komponent wyglądałby mniej więcej tak: 

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

Zauważ, że musisz wywołanie wykresu zarówno w metodzie componentDidMount() (dla pierwszego renderowania), jak i w shouldComponentUpdate() (dla kolejnych aktualizacji). Zauważ również, że potrzebujesz sposobu, aby przekazać Właściwości lub stan komponentu do wykresu i że są one specyficzne dla kontekstu: w pierwszym renderowaniu zostały już ustawione na this.props i this.state, ale w późniejszych aktualizacjach nowe właściwości nie są jeszcze ustawione na komponencie, więc musisz zamiast tego użyć parametrów funkcji.

Zobacz jsfiddle tutaj .

 55
Author: couchand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-21 19:52:52

React może również renderować elementy SVG bezpośrednio. Oto przykład: sposoby integracji Reacta.js i D3

 5
Author: ahmad chatha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-17 19:45:25

Możesz użyć D3 jako narzędzia - to znaczy, nie używaj D3 do zmiany DOM. Zamiast tego używaj D3 do skalowania i osi, ale Interpoluj wyjścia tych funkcji D3 do html / svg.

Oto przykład z mojego projektu. 
 scale = d3.time.scale()
   .range([ 0, 100 ])
   .clamp(true)

...który jest przekazywany przez rekwizyty do komponentu...

React.DOM.rect({
          x: "#{props.scale(start)}%"
          width: "#{Math.abs( props.scale(end) - props.scale(start)) }%"
         })

Gdzie React wiąże dane z elementami, a nie selekcjami D3.

 2
Author: adamwong246,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-23 20:06:43