Nivo ResponsivePie 没有响应

如何解决Nivo ResponsivePie 没有响应

我正在尝试复制 Nivo Size Pie，当您将鼠标悬停在一块馅饼上时，该部分会根据 activeOuterRadiusOffset 和 activeInnerRadiusOffset 放大值，但是在这种情况下，悬停在一块的大小没有变化。我看到 issue posted on the github 表示图表无响应，人们使用 AutoSizer 但复制导致我出现空白屏幕。

编辑：我有一个 replica of the code，它似乎在 codeandBox 上正常工作，但在我的应用程序中却没有。

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',2 ] ] }}
        defs={[
            {
                id: 'dots',type: 'patternDots',background: 'inherit',color: 'rgba(255,255,0.3)',size: 4,padding: 1,stagger: true
            },{
                id: 'lines',type: 'patternLines',rotation: -45,linewidth: 6,spacing: 10
            }
        ]}
        fill={[
            {
                match: {
                    id: 'ruby'
                },id: 'dots'
            },{
                match: {
                    id: 'c'
                },{
                match: {
                    id: 'go'
                },{
                match: {
                    id: 'python'
                },{
                match: {
                    id: 'scala'
                },id: 'lines'
            },{
                match: {
                    id: 'lisp'
                },{
                match: {
                    id: 'elixir'
                },{
                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>
    )
}

解决方法

检查您使用的是哪个版本的 @nivo/pie。它应该与您的 @nivo/core 版本相同。