无法让Plotly.js图形在react-grid-layout中调整大小

Question

我一直在做一个用于在屏幕上显示和移动图形的react-grid-layout。目前我可以将plotly.js图添加到容器中。它是可移动的，但不随容器调整大小。我想知道当容器框调整大小时，是否需要一个异步函数来允许绘图重新渲染。下面是网格布局和直方图的代码。

const ReactGridLayout = WidthProvider(Responsive);

const Dash = (props) => {
  const { value, addItem } = props
  const ref = useRef()

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
        <ReactGridLayout
          className="layout"
          onLayoutChange={(e) => console.log(props.layout)}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
          resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw','se', 'ne']}
          verticalCompact={false}
          // onDragStart={'.dragbackground'}
          // isDraggable={false}
          draggableHandle=".dragHandle"
               
      >        
        {_.map(value, (item, i) => (
          <div id = 'gridID' ref={ref} key={i} data-grid={props.layout[i]}  onClick={() => props.updateLayout(props.layout[i])}>
            <span className='dragHandle'>Drag From Here</span>
            <br/>
            <DashItem  key={i} >
              {item}
            </DashItem>
            <span className='dragHandle'>Drag From Here</span>
          </div>
        ))}
        </ReactGridLayout>
    </div>
  );
}


Dash.propTypes = {
  value: PropTypes.array,
  onIncreaseClick: PropTypes.func.isRequired
}


const mapStateToProps = (state) => {
  return {
    value: state.count,
    layout: state.layout,
    onLayoutChange: state.onLayoutChange,
  };
};

const mapDispatchToProps = dispatch => { 
  return {
    addItem: () => dispatch({type: actionTypes.ADD_GRID_ITEM}),
    updateLayout: (i) => dispatch({type: actionTypes.UPDATE_LAYOUT, layoutId: i}),
    removeItem: (i) => dispatch({type: actionTypes.REMOVE_ITEM, layoutElId: i})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dash);

以下是使用plotly.js的直方图的代码：

export default function Histogram(props) {

  const { width, height, ref } = useResizeDetector({
    //
  })

  const layout = props.layout

  return(   
    <div style={{height: '100%', width: '100%'}}> 
      <Plot
      useResizeHandler = {true}
      ChartComponent = {Histogram}
      callback={(chart) => this.setChart(chart)}
      style={{width: "100%", height: "100%"}}
      config={{responsive: true}}
      data={[
        {
          x: d1,
          type: 'histogram',
          marker: {
            colour: 'red',
            opacity: 0.5
          },
        },
        {
          x: d2,
          type: 'histogram',
          marker: {
            colour: 'blue',
            opacity: 0.5
          }
        }
      ]}
      layout={{   
        ...layout,
        height: height,
        width: width,
        autosize:true,
        margin: {
          l: 50,
          r: 50,
          b: 100,
          t: 100,
          pad: 4
        },
        title: 'Histogram Title',
          barmode: 'stack',
          bargap: 0.05,
          bargroup: 2,
          xaxis: {
            title: 'X Axis Title'
          },
          yaxis: {
            title: 'Frequency',
            automargin:true
          }}}
      style= {{
        display: 'flex',
        alignItems: 'center',
      }}
      config= {{
      responsive: true 
      }}  
      />
    </div>   
  )
};

我正在使用Redux reducer将图形元素输入到我的网格中：

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case actionTypes.ADD_GRID_ITEM:
            const id = uuid()
            console.log("adding: " + id)
            return{
                ...state,
                count: state.count.concat(<Histogram/>),
                layout: state.layout.concat({
                    i: `${id}`,
                    x: 2,
                    y: 0,
                    w: 4,
                    h: 5
                }),
            }

Answer 1

我刚刚构建了一些类似的东西，对我有效的是使用react-resize-detector将绘图包装在带有ref的div中，以便它始终以响应窗口调整大小和拖动调整大小的方式填充其父对象，但保持与react布局网格的解耦。下面是我使用的plot组件：

import { useResizeDetector } from 'react-resize-detector'
import Plot from 'react-plotly.js'
export default function ResponsivePlot(props) {
  const { width, height, ref } = useResizeDetector({ 
    // refreshMode: 'debounce', 
    // refreshRate: 1000
  })
  const { layout, layers } = props
  return (
    <div ref={ref} style={{ display: 'flex', height: '100%' }}>
      <Plot
        data={layers}
        layout={{
          ...layout, 
          ...{
            width: width, 
            height: height
          }
        }}
      />
    </div>
  )
};

用法：

import ResponsivePlot from './ResponsivePlot'

//...other stuff 

<ResponsivePlot layers={layers} layout={layout} />