web-dev-qa-db-ja.com

d3.jsグラフィックをFacebook Reactアプリケーションに統合する適切な方法はありますか？

はい、react-artがあることは知っていますが、 壊れているようです 。

問題は、d3.jsはすべてブラウザーDOMの変更に関するものであり、ブラウザーDOMへのすべての変更がReactの仮想DOMに反映されないため、それを直接使用すると、たとえばcomponentDidMountメソッド内で正しく機能しないことです。何か案は？

javascriptfacebookd3.jsreactjs
27
Vladimir Lebedev

1つの戦略は、決して許可しないブラックボックスコンポーネントを構築することかもしれませんReact更新。コンポーネントライフサイクルメソッドshouldComponentUpdate()は、コンポーネントが独自に決定できるようにすることを目的としています。再レンダリングが必要かどうか。alwaysこのメソッドからfalseを返す場合、React子要素に飛び込むことはありません（つまり、forceUpdate()を呼び出さない限り）。したがって、これはReactのディープアップデートシステムに対する一種のファイアウォールとして機能します。

render()の最初の呼び出しを使用してグラフのコンテナーを作成し、次にcomponentDidMount()メソッド内でD3を使用してグラフ自体を描画します。次に、Reactコンポーネントの更新に応じてチャートを更新することになります。想定されていないかもしれませんがshouldComponentUpdate()でそのようなことをするために、先に進んでそこからD3アップデートを呼び出すことができない本当の理由はわかりません（Reactコンポーネントの- _performUpdateIfNecessary() ）。

したがって、コンポーネントは次のようになります。

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

チャートは、componentDidMount()メソッド（最初のレンダリングの場合）とshouldComponentUpdate()（後続の更新の場合）の両方で呼び出す必要があることに注意してください。また、コンポーネントのプロパティまたは状態をグラフに渡す方法が必要であり、それらはコンテキスト固有であることに注意してください。最初のレンダリングでは、それらはすでに_this.props_および_this.state_に設定されていますが、後の更新では、新しいプロパティはまだコンポーネントに設定されていないため、代わりに関数パラメーターを使用する必要があります。

Jsfiddle ここ を参照してください。

59
couchand

ReactはSVG要素を直接レンダリングすることもできます。次に例を示します。 React.jsとD3を統合する方法

6
ahmad chatha

D3をユーティリティとして使用できます。つまり、D3を使用してDOMを変更しないでください。むしろ、スケールと軸にD3を使用しますが、それらのD3関数の出力をhtml/svgに補間します。

これが私のプロジェクトの例です。

 scale = d3.time.scale()
   .range([ 0, 100 ])
   .clamp(true)

...小道具を介してコンポーネントに渡されます...

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

ここで、Reactは、D3の選択ではなく、データを要素にバインドします。

2
adamwong246