Hacer zoom en la web parece un código fácil y silencioso como este:

 const zoom = d3 .zoom<SVGSVGElement, unknown>() .scaleExtent([1, 3]) .translateExtent([ [0, 0], [width, height], ]) .extent([ [0, 0], [width, height], ]) .on("zoom", ({ transform }: D3ZoomEvent<SVGSVGElement, unknown>) => { x.range([0, width].map((d) => transform.applyX(d))); xState.range([0, width].map((d) => transform.applyX(d))); g.selectAll(".bar") .attr("x", function (d) { return x( (d as { key: string; value: number }).key as string ) as number; }) .attr("width", x.bandwidth()); g.selectAll(".category").attr("transform", function (d) { return `translate(${xState( (d as DataType).State as string )},${containerHeight - margin.top})`; }); }); svg.call(zoom);

Sin embargo, no tengo idea de cómo implementar esto en reaccionar nativo. Hice range in state, esto es en react native:

 const [xRange, setXRange] = useState([0, width]); const x = d3.scaleBand().range(xRange).padding(0.25);

y el manejador de pellizco:

 <PinchGestureHandler onGestureEvent={e => { const zoomIdentity = d3.zoomIdentity.translate( e.nativeEvent.focalX, e.nativeEvent.focalY, ); setXRange(xRange.map(d => zoomIdentity.applyX(d))); }}> <Svg style={styles.svg} width={width} height={width}> {testData.map((d, index) => { return ( <Rect key={`rect:${index}`} rx={5} x={x(d.key)} y={y(d.value)} fill={color(d.value)} width={xBandWidth} height={height - y(d.value)} /> ); })} {data.map((d, index) => { return ( <SVGText key={`label:${index}`} fontSize={10} transform={`translate(${xState(d.State) as number},${ height + 20 })`} fill="green"> {d.State} </SVGText> ); })} </Svg> </PinchGestureHandler>

Pero no funciona, ¿quiero tener la misma lógica de zoom en la web para reaccionar de forma nativa?