React VictoryPie如何实现鼠标悬停时扇形切片放大效果

解决方案 #

你遇到的transform位移问题本质是SVG元素默认变换原点为画布左上角，而非扇形自身中心，无需手动计算偏移，直接通过VictoryPie原生支持的扇形半径属性调整即可实现悬停放大效果，实现成本更低且不会出现位置偏移。

具体修改点 #

• 给<VictoryPie>设置基础外半径radius属性，数值大于你现有innerRadius={100}即可，示例设置为120
• 悬停mutation中新增radius属性，调大数值实现向外放大凸起，无需修改transform相关样式
• 鼠标移出时将radius重置为基础值即可

修改后完整代码 #

<div style={{ width: '150px' }}>
  <VictoryPie
    data={[
      { x: 'Cats', y: 35, label: 'Cats \n 35%' },
      { x: 'Dogs', y: 40, label: 'Dogs \n 40%' },
      { x: 'Birds', y: 55, label: 'Birds \n 55%' }
    ]}
    labelComponent={
      <VictoryTooltip
        cornerRadius={10}
        pointerWidth={30}
        pointerLength={20}
        flyoutPadding={{ top: 10, bottom: 10, left: 25, right: 25 }}
        style={{ fontSize: '36px', fill: '#FFF' }}
        flyoutStyle={{ fill: '#414B5F' }}
        orientation="right"
      />
    }
    colorScale={['tomato', 'orange', 'gold', 'cyan', 'navy']}
    innerRadius={100}
    radius={120} // 新增基础外半径
    events={[
      {
        target: 'data',
        eventHandlers: {
          onMouseOver: () => {
            return [
              {
                target: 'data',
                // 调大外半径实现放大，保留变红样式
                mutation: () => ({ style: { fill: 'red' }, radius: 130 })
              },
              {
                target: 'labels',
                mutation: () => ({ active: true })
              }
            ]
          },
          onMouseOut: () => {
            return [
              {
                target: 'data',
                // 重置样式和半径
                mutation: () => ({ style: {}, radius: 120 })
              },
              {
                target: 'labels',
                mutation: () => ({ active: false })
              }
            ]
          }
        }
      }
    ]}
  />
</div>

如果需要调整放大幅度，直接修改悬停时的radius数值即可，数值越大凸起效果越明显。

内容的提问来源于stack exchange，提问作者Josh