reactjs - React-Vis - 如何渲染一个空的图表区域？

Question

我正在研究一个 react-vis 图表，该图表将动态更新当用户单击/关闭该系列的图例项时显示的数据。

如果用户点击了所有系列的点击，我渲染的 JSX 基本上如下所示：

  <div>
    <XYPlot
      xDomain={paretoOrder}
      margin={{left: 150, bottom: 150}}
      width={450}
      height={450}
      xType="ordinal"
      stackBy="y"
    >
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis
        tickLabelAngle={-45}
      />
      <YAxis 
        tickFormat={ tick => translator.formatTime(tick, {hideZero: true})}
      />
      <VerticalBarSeries
        data={[]}
      />
    </XYPlot> 
    <DiscreteColorLegend
      orientation="horizontal"
      width={300}
      items={legendItems}
      onItemClick={this.onLegendClick}
    />
  </div>

我希望这仍然会渲染轴、网格线等，但整个图表会从 DOM 中删除。如何使用空数据渲染图表，但在 DOM 中保留轴、网格线等？

Answer 1

将dontCheckIfEmptyprop（为 true，默认为 false）添加到<XYPlot>标签。

 <XYPlot
   dontCheckIfEmpty
 >
   <XAxis/>
   <YAxis/>
   <VerticalBarSeries
      data={data}
   />
   <VerticalGridLines />
   <HorizontalGridLines />
 </XYPlot>