我正在尝试复制Nivo Size Pie，当您将鼠标悬停在一块饼上时，该块会根据activeOuterRadiusOffset和activeInnerRadiusOffset值放大，但是在这种情况下，悬停在一块上的大小不会改变。我在 github 上看到一个关于图表无响应的问题，人们使用 AutoSizer 但复制导致我出现空白屏幕。
编辑：我有一个代码副本，它似乎在代码沙盒上正常工作，但在我的应用程序中却没有。
import React, { useRef, Component} from 'react';
import "./styles.css";
import {respPie} from "./data";
import Button from '@material-ui/core/Button';
import {Pie, ResponsivePie} from "@nivo/pie";
// Current issue with switch system
// https://github.com/plouc/nivo/issues/411
//https://www.gitmemory.com/issue/plouc/nivo/411/476589260
export default function App {
return (
<div style={{height: 500, width:'99%'}}>
<ResponsivePie
data={respPie}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
innerRadius={0.3}
padAngle={2}
cornerRadius={3}
activeOuterRadiusOffset={88}
activeInnerRadiusOffset={1}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.2 ] ] }}
arcLinkLabelsSkipAngle={5}
arcLinkLabelsTextColor="#333333"
arcLinkLabelsThickness={111}
arcLinkLabelsColor={{ from: 'color', modifiers: [] }}
arcLabelsSkipAngle={1}
arcLabelsTextColor={{ from: 'color', modifiers: [ [ 'darker', 2 ] ] }}
defs={[
{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: 'rgba(255, 255, 255, 0.3)',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: 'rgba(255, 255, 255, 0.3)',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]}
fill={[
{
match: {
id: 'ruby'
},
id: 'dots'
},
{
match: {
id: 'c'
},
id: 'dots'
},
{
match: {
id: 'go'
},
id: 'dots'
},
{
match: {
id: 'python'
},
id: 'dots'
},
{
match: {
id: 'scala'
},
id: 'lines'
},
{
match: {
id: 'lisp'
},
id: 'lines'
},
{
match: {
id: 'elixir'
},
id: 'lines'
},
{
match: {
id: 'javascript'
},
id: 'lines'
}
]}
legends={[
{
anchor: 'bottom',
direction: 'row',
justify: false,
translateX: 0,
translateY: 56,
itemsSpacing: 0,
itemWidth: 100,
itemHeight: 18,
itemTextColor: '#999',
itemDirection: 'left-to-right',
itemOpacity: 1,
symbolSize: 18,
symbolShape: 'circle',
effects: [
{
on: 'hover',
style: {
itemTextColor: '#000'
}
}
]
}
]}
/>
</div>
)
}