漏斗图出现Cannot read property 'toFront' of undefined（shape.toFront） #2689

g2版本号 4.0.12 出现报错 Cannot read property 'toFront' of undefined 定位到代码中是这行报错， 如何复现： 没找到复现规律，也不是必现

放上我的代码：

import React, {useEffect, useRef} from 'react'
import './reset-antd.css'
import style from './index.module.scss'
import {Chart} from '@antv/g2'
import DataSet from '@antv/data-set'
import {observer} from 'mobx-react-lite'
import {TFunnelStore} from '../../store'
import {Empty, message} from 'antd'
import {SmileOutlined} from '@ant-design/icons'

const {DataView} = DataSet

function renderEmpty() {
  return (
    <div className={style.emptywrapper}>
      <Empty />
    </div>
  )
}
// TODO:
function renderFunnerlChart(funnelData: any, resData: any, funnelStore: TFunnelStore) {
  const chartRef: any = useRef<any>()
  const isFieRender: any = useRef<boolean>(true)
  useEffect(() => {
    if (!funnelData.length && !Object.entries(resData).length) return
    if (isFieRender.current) {
      chartRef.current = new Chart({
        container: 'funnel',
        autoFit: true,
        height: 500,
        width: 500,
        padding: [10, 250, 30, 10],
      })
      isFieRender.current = false
    }
    const chart = chartRef.current
    const dv = new DataView().source(funnelData)
    dv.transform({
      type: 'map',
      callback(row) {
        row.percent = row.count / funnelData[0].count
        // row.percent = row.count / 50000
        return row
      },
    })
    const data: any = dv.rows
    chart.data(data)
    chart.axis(false)
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
      itemTpl:
        '<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' +
        '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
        '{name}<br/>' +
        '<span style="padding-left: 16px;line-height: 16px;">数量：{count}</span><br/>' +
        '<span style="padding-left: 16px;line-height: 16px;">占比：{percent}</span><br/>' +
        '</li>',
    })
    chart
      .coordinate('rect')
      .transpose()
      .scale(1, -1)
    chart
      .interval()
      .adjust('symmetric')
      .position('action*percent')
      .shape('funnel')
      .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
      .label(
        'action*count',
        (action: string, count: number) => {
          return {
            content: `${action} ${count}`,
          }
        },
        {
          offset: 35,
          labelLine: {
            style: {
              lineWidth: 1,
              stroke: 'rgba(0, 0, 0, 0.15)',
            },
          },
        },
      )
      .tooltip('action*count*percent', (action: string, count: number, percent: number) => {
        return {
          name: action,
          percent: +percent * 100 + '%',
          count,
        }
      })
      .animate({
        appear: {
          animation: 'fade-in',
        },
        update: {
          annotation: 'fade-in',
        },
      })

    chart.interaction('element-active')

    chart.on('beforepaint', () => {
      // chart.annotation().clear(true)
      const chartData = chart.getData()
      // 中间标签文本
      chartData.forEach((obj: any) => {
        chart.annotation().text({
          top: true,
          position: {
            action: obj.action,
            percent: 'median',
          },
          content: (+obj.percent * 100).toFixed(2) + '%', // 显示的文本内容
          style: {
            stroke: null,
            fill: '#fff',
            textAlign: 'center',
          },
        })
      })
    })
    try {
      chart.render()
    } catch (e) {
      console.log(e)
    }

    // chart.render()
  }, [funnelStore.funnelData])
  return (
    <>
      <div className={style.funnelchartwrapper} id="funnel">
        {!funnelData.length && isFieRender.current ? renderEmpty() : null}
      </div>
    </>
  )
}
const MyFunnelChart = observer(({funnelStore}: {funnelStore: TFunnelStore}) => {
  const {funnelData, resData} = funnelStore
  useEffect(() => {
    window &&
      (window.onerror = (err: any) => {
        console.log('err', err)
      })
  }, [])
  useEffect(() => {}, [funnelStore.funnelData])
  return renderFunnerlChart(funnelData, resData, funnelStore)
})
export default MyFunnelChart