问题描述
我正在尝试复制 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
版本相同。