recharts PieChart 抑制饼图选择边框答案

【问题标题】：recharts PieChart suppress pie selection borderrecharts PieChart 抑制饼图选择边框
【发布时间】：2023-02-16 18:59:50
【问题描述】：

使用 recharts PieChart 实现，我想自定义所选饼图元素周围的边框。它在教程中显示为黑色，带有圆角：

我试图禁用它，即，将自定义侦听器附加到单击事件——但边框仍然按原样显示，即使（我认为）我消耗了这些事件。

  data: 'productivity' | 'recreation' | 'tbd' | undefined;
};

export const ContentGraph = React.memo(({ data }: ContentGraphProps) => {
  const content = getContent();

  const consumeChartClick = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Click");
    return;
  }
  const consumeChartDown = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Down");
    return;
  }

  const consumeChartUp = function (nextState: CategoricalChartState, event: any) {
    console.log("Consuming pie chart click event: Up");
    return;
  }

  const consume = function(data: any, index: number, e: React.MouseEvent) {
    // do nothing
    // e.stopPropagation;
    console.log("Consuming pie click");
    return;
  }

  if (!data) return null;

  return (
    <>
      <ResponsiveContainer width="100%" height={140}>
        {/* investigate on github, generateCategoricalChart.tsx */}
        <PieChart onClick={consumeChartClick} onMouseDown={consumeChartDown} onMouseUp={consumeChartUp}>
          <Pie data={data} innerRadius={40} outerRadius={70} paddingAngle={1} dataKey="count" onclick={consume}>
            {data.map(({ curr }) => (
              <Cell key={curr} fill={content: content[curr].color} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <Legend>
        {data.map(({ curr }) => (
          <LegendRow key={curr}>
            <LegendTerm color={content[curr].color} />
            <LegendDescription>{content[curr].name}</LegendDescription>
          </LegendRow>
        ))}
      </Legend>
    </>
  );
});

据我了解应该压制边界，但它仍然出现？输出显示在控制台中——但不需要的边框也是如此。

【问题讨论】：

标签： typescript pie-chart recharts

【解决方案1】：

我认为这应该有效。只需在单元格中添加样式即可。

<Cell style={{outline: 'none'}} key={curr} fill={content: content[curr].color} />

【讨论】：