反応でSVGを反応的にする

Question

私は反応するユーティリティコンポーネントに取り組んで、反応で反応するいくつかのD3コンポーネントを作成しています。しかし、私は深いSVGの知識が私を逃げる。私はthis issue on githubに私の応答ユーティリティを基づいています。しかし、実際には機能していません。グラフをレンダリングするだけですが、widthまたはheightではなく、実際には幅と高さが小さくなります。また、サイズも変更されません。

import React from 'react'; 

class Responsive extends React.Component{ 
    constructor() { 
     super(); 
     this.state = { 
     size: { 
      w: 0, 
      h: 0 
     } 
     } 
    } 

    componentDidMount() { 
     window.addEventListener('resize', this.fitToParentSize.bind(this)); 
     this.fitToParentSize(); 
    } 

    componentWillReceiveProps() { 
     this.fitToParentSize(); 
    } 

    componentWillUnmount() { 
     window.removeEventListener('resize', this.fitToParentSize.bind(this)); 
    } 

    fitToParentSize() { 
     let elem = this.findDOMNode(this); 
     let w = elem.parentNode.offsetWidth; 
     let h = elem.parentNode.offsetHeight; 
     let currentSize = this.state.size; 

     if (w !== currentSize.w || h !== currentSize.h) { 
      this.setState({ 
       size: { 
        w: w, 
        h: h 
       } 
      }); 
     } 
    } 

    render() { 

     let {width, height} = this.props; 

     width = this.state.size.w || 100; 
     height = this.state.size.h || 100; 

     var Charts = React.cloneElement(this.props.children, { width, height}); 

     return Charts; 
    } 
}; 

export default Responsive; 

Responsive width={400} height={500}> 
    <XYAxis data={data3Check} 
      xDataKey='x' 
      yDataKey='y' 
      grid={true} 
      gridLines={'solid'}> 
    <AreaChart dataKey='a'/> 
    <LineChart dataKey='l' pointColor="#ffc952" pointBorderColor='#34314c'/> 
    </XYAxis> 
</Responsive> 

Answer 1

免責事項：私は、低レベルは+ D3視覚化コンポーネントのライブラリフルに反応vxの著者です。

あなたは@vx/responsiveを使用するか、あなたは（私はほとんどの状況はwithParentSize()を必要と発見した）に対応したいのサイジングものに応じてwithParentSize()またはwithWindowSize()をもとに、独自の高次コンポーネントを作成することができます。

グラフコンポーネントを取り込む高次コンポーネントを作成し、デフォルトでデバウンス時間が300msになるようにウィンドウがサイズ変更されたときにイベントリスナーをアタッチ/削除します（これを小道具でオーバーライドできます）。次元をその状態に格納します。新しい親ディメンションはparentWidth, parentHeightまたはscreenWidth, screenHeightというようにチャートに渡され、そこからあなたのsvgの幅と高さの属性を設定したり、それらの値に基づいてグラフの寸法を計算したりすることができます。

使用法：

// MyChart.js 
import { withParentSize } from '@vx/responsive'; 

function MyChart({ parentWidth, parentHeight }) { 
    return (
    <svg width={parentWidth} height={parentHeight}> 
     {/* stuff */} 
    </svg> 
); 
} 

export default withParentSize(MyChart);