Estoy tratando de escalar una porción de este gráfico circular de victoria al pasar el mouse por encima, pero tengo dificultades para que se represente correctamente. ¿Alguien ha tenido suerte con esto? Intenté agregar cosas como transform: scale(1.2) al estilo de mutación, pero mueve el segmento en lugar de las escalas (creo que esto se debe a que scale se basa en el punto de (0,0)). También intenté jugar con translate o matrix pero no puedo hacer que funcione correctamente. Aquí está mi código:
<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} events={[ { target: 'data', eventHandlers: { onMouseOver: () => { return [ { target: 'data', mutation: () => ({ style: { fill: 'red', width: 30 } }) }, { target: 'labels', mutation: () => ({ active: true }) } ] }, onMouseOut: () => { return [ { target: 'data', mutation: () => {} }, { target: 'labels', mutation: () => ({ active: false }) } ] } } } ]} /> </div>Agregué una mutación simple que cambia el corte a rojo al pasar el mouse y funciona muy bien. Simplemente estoy teniendo dificultades para encontrar la mejor manera de hacer que la división se amplíe ligeramente sin causar problemas.
Gracias por adelantado
Puede usar un componente personalizado para renderizar rebanadas
const CustomSlice = (props) => { const [scale, setScale] = useState(1); // modified transformation from here // https://github.com/FormidableLabs/victory/blob/844109cfe4e40b23a4dcb565e551a5a98015d0c0/packages/victory-pie/src/slice.js#L74 const transform = `translate(${props.origin.x}, ${props.origin.y}) scale(${scale})`; return ( <Slice {...props} style={{ ...props.style }} events={{ onMouseOver: (e) => { if (props.events.onMouseOver) { props.events.onMouseOver(e); } setScale((c) => c * 1.2); }, onMouseOut: (e) => { if (props.events.onMouseOut) { props.events.onMouseOut(e); } setScale(1); } }} transform={transform} /> ); }; <div style={{ width: "150px" }}> <VictoryPie dataComponent={<CustomSlice />} 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} events={[ { target: "data", eventHandlers: { onMouseOver: (e) => { return [ { target: "data", mutation: () => ({ style: { fill: "red", width: 30 } }) }, { target: "labels", mutation: () => ({ active: true }) } ]; }, onMouseOut: () => { return [ { target: "data", mutation: () => {} }, { target: "labels", mutation: () => ({ active: false }) } ]; } } } ]} /> </div>