0

我正在开发一个响应式实用程序组件，以使一些 D3 组件响应响应。然而，我对 SVG 的深厚知识却让我无法理解。我已经在 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>
4

1 回答 1

1

免责声明：我是vx的作者，这是一个包含可视化组件的低级 react+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);
于 2017-07-23T19:56:37.220 回答