Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

222
Vistas
How to have zoom logic in react native event with d3 like web zoom event?

Zooming in web seem quiet easy code like this:

  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);

However I have no idea how to implement this in react native? I made range in state, this is in react native:

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

and the pinch handler:

<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>

But it don't work, i want to have same zoom logic in web to react native?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda