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（你可以用prop）并将尺寸存储在其状态中。新的父级尺寸将作为道具传递到图表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);

在反应中使SVG响应

1 个答案: