Выполнение 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

отказ от ответственности: Я автор vx низкого уровня реагируют + d3 библиотека полна компонентов визуализации.

Вы можете использовать @vx/responsive или создать свой собственный компонент высшего порядка, основанного на withParentSize() или withWindowSize() в зависимости от того, что проклейки вы хотите ответить (я нашел в большинстве случаев требуется withParentSize()).

Суть в том, что вы создаете компонент более высокого порядка, который принимает компонент диаграммы, и он прикрепляет/удаляет прослушиватели событий, когда окно изменяет размер с временем отладки 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);