Событие клика не работает на метке пирога Recharts

Question

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

Мое требование состоит в том, чтобы получить значение секции пирога при нажатии. Я могу добиться этого, добавив реквизиты onClick в тег Pie. Но проблема в том, что когда я нажимаю на метку в PieCharts, событие click не срабатывает.

Некоторые результаты поиска говорят, что у нас не может быть события click для дочерних элементов svg, таких как прямоугольник, круг, текст и т. Д.

Кто-нибудь сталкивался с такими проблемами? Пожалуйста, помогите мне, как действовать дальше.

Код круговой диаграммы

const data = [{ name: 'On Time', value: Number(70), mode: 'total' }, 
              { name: 'Delayed', value: Number(30), mode: 'total' }];
const COLORS = ['#008000', '#fa833c'];
<PieChart width={300} height={300} className={'mainPie'}>
    <Pie dataKey="value"
         activeIndex={this.state.activeIndex}
         labelLine={false}
         label={renderCustomizedLabel}
         data={data}
         cx={150}
         cy={130}
         outerRadius={120}
         innerRadius={60}
         onClick={this.onPieClick}
         fill="#8884d8">
         {data.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>)}
     </Pie>
 </PieChart>

Функция события при нажатии

onPieClick = (index, data) => {
    console.log('onPieClick'+index.value);
}

Кодовая база пользовательских меток

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, mode}) => {
let radius = innerRadius + (outerRadius - innerRadius) * 0.3;
let x = cx + radius * Math.cos(-midAngle * (Math.PI / 180));    
let y = cy + radius * Math.sin(-midAngle * (Math.PI / 180));
return (
(<g>
        <text x={cx} y={cy} dy={8} textAnchor="middle" fill="black" fontSize="12">DELIVERIES</text>
        <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} fontSize="12" dominantBaseline="central">
            {(percent * 100).toFixed(2)}%
        </text>
    </g>
);

}

Ниже приведен скриншот диаграммы.

Answer 1

У меня тоже была эта проблема с Rechart Bar Chart. Я решил это, установив pointerEvents пользовательской метки в none.

const renderCustomizedLabel = (...) => {
  ...
  return <g style={{ pointerEvents: 'none' }}>...</g>;
};

Согласно MDN, путем установки pointer-events: none

Элемент никогда не является целью событий мыши; однако события мыши могут предназначаться для его дочерних элементов, если у этих потомков есть события указателя, установленные в некоторое другое значение. В этих обстоятельствах события мыши будут запускать прослушиватели событий на этом родительском элементе по мере необходимости на пути к / от потомка во время фаз захвата событий / пузырей.

Следовательно, событие click проходит через метку и запускает Pie onClick.