React-Vis - Как отобразить пустую область графика?

Question

Я работаю над диаграммой реагирования, которая будет динамически обновлять данные, которые отображаются, когда пользователь нажимает на элемент легенды для этой серии.

Если пользователь щелкает, щелкает все серии, 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

Добавлять dontCheckIfEmpty prop (как истина, по умолчанию - ложь) на <XYPlot> тег.

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