Evento de zoom de d3 no se dispara para el gráfico de cloropeto SVG creado en Storybook usando Nivo Charts.

Creé un gráfico de coropléticas de nivo en Storybook y necesito agregar funcionalidad de zoom. Tengo una función de zoom de d3 que se supone que debe escuchar el evento de zoom en mi svg. Parece que el evento de zoom no se está activando.

El StyledResponsiveChoropleth se renderiza como un SVG en el navegador, por lo que estoy utilizando d3.select("svg") para acceder al gráfico.

Cuando hago zoom en el componente en el navegador, no sucede nada, parece que el evento de zoom no se está registrando.

Cuando escucho los eventos de la rueda del ratón, sí aparecen.

Este es mi código a continuación:

“`
export const ChloropethChart: FC<ichoroplethchartprops> = ({
props
}) => {
// ¿QUÉ SUCEDE CUANDO SE LLAMA A HANDLEZOOM????????????

const selectSVG = select<svgsvgelement, unknown="">('svg')
const rect = selectSVG
.append('rect')
.attr('width', '600px')
.attr('height', '600px')
.style('fill', 'none')
.style('pointer-events', 'all')

const handleZoom = (e: any) => {
selectSVG.append('g').attr('transform', e.transform)
}
const zoomBehaviour = zoom<svgsvgelement, unknown="">().on('zoom', handleZoom)

const initZoom = () => {
selectSVG.call(zoomBehaviour)
}
initZoom()

return (
<styledchoroplethchart height="{height}">
<styledresponsivechoropleth data="{data}" features="{featureData}" margin="{{" top:="" 0,="" right:="" 0,="" bottom:="" 0,="" left:="" 0="" }}="" colors="{colors" colors="" :="" purple_range}="" domain="{domain}"></styledresponsivechoropleth>
</styledchoroplethchart>
)
}

export default ChloropethChart
“`</svgsvgelement,></svgsvgelement,>

davy.ai

July 12, 2023 at 3:29 pm

Parece que estás creando un comportamiento de zoom utilizando la función de zoom de d3 y agregándola al elemento SVG utilizando selectSVG.call(zoomBehaviour). Sin embargo, tu función handleZoom no está haciendo nada cuando se activa el evento de zoom.

Para agregar funcionalidad de zoom a tu gráfico de coropletas de Nivo, debes actualizar la transformación del contenedor del gráfico de coropletas cuando se activa el evento de zoom.

Puedes lograr esto seleccionando el elemento del contenedor de coropletas (el que en realidad muestra el mapa) y actualizando su atributo de transformación utilizando la información de transformación que se pasa en el evento de zoom.

Aquí tienes un ejemplo de cómo hacerlo:

export const ChloropethChart: FC<ichoroplethchartprops> = ({
  props
}) => {

  const handleZoom = (e: any) => {
    // seleccionar el elemento del contenedor de coropletas y actualizar su atributo de transformación
    select('.rsm-choropleth-map').attr('transform', e.transform);
  }

  const zoomBehaviour = zoom<svgsvgelement, unknown="">().on('zoom', handleZoom)

  const initZoom = () => {
    select('svg').call(zoomBehaviour)
  }

  initZoom()

  return (
    <styledchoroplethchart height="{height}">
      <styledresponsivechoropleth data="{data}" features="{featureData}" margin="{{" top:="" 0,="" right:="" 0,="" bottom:="" 0,="" left:="" 0="" }}="" colors="{colors" colors="" :="" purple_range}="" domain="{domain}"></styledresponsivechoropleth>
    </styledchoroplethchart>
  )
}

export default ChloropethChart

En la función handleZoom, estamos seleccionando el elemento del contenedor de coropletas utilizando select('.rsm-choropleth-map') (suponiendo que el nombre de la clase es rsm-choropleth-map). Luego actualizamos su atributo de transformación utilizando la información pasada en el evento de zoom con attr('transform', e.transform).

Nota: Asegúrate de que el elemento del contenedor de coropletas tenga el nombre de clase rsm-choropleth-map (o actualiza el nombre de clase utilizado en la función select).</svgsvgelement,>

Answer

davy.ai

July 12, 2023 at 3:29 pm
Parece que estás creando un comportamiento de zoom utilizando la función de zoom de d3 y agregándola al elemento SVG utilizando selectSVG.call(zoomBehaviour). Sin embargo, tu función handleZoom no está haciendo nada cuando se activa el evento de zoom.

Para agregar funcionalidad de zoom a tu gráfico de coropletas de Nivo, debes actualizar la transformación del contenedor del gráfico de coropletas cuando se activa el evento de zoom.

Puedes lograr esto seleccionando el elemento del contenedor de coropletas (el que en realidad muestra el mapa) y actualizando su atributo de transformación utilizando la información de transformación que se pasa en el evento de zoom.

Aquí tienes un ejemplo de cómo hacerlo:
```
export const ChloropethChart: FC<ichoroplethchartprops> = ({
  props
}) => {

  const handleZoom = (e: any) => {
    // seleccionar el elemento del contenedor de coropletas y actualizar su atributo de transformación
    select('.rsm-choropleth-map').attr('transform', e.transform);
  }

  const zoomBehaviour = zoom<svgsvgelement, unknown="">().on('zoom', handleZoom)

  const initZoom = () => {
    select('svg').call(zoomBehaviour)
  }

  initZoom()

  return (
    <styledchoroplethchart height="{height}">
      <styledresponsivechoropleth data="{data}" features="{featureData}" margin="{{" top:="" 0,="" right:="" 0,="" bottom:="" 0,="" left:="" 0="" }}="" colors="{colors" colors="" :="" purple_range}="" domain="{domain}"></styledresponsivechoropleth>
    </styledchoroplethchart>
  )
}

export default ChloropethChart
```
En la función handleZoom, estamos seleccionando el elemento del contenedor de coropletas utilizando select('.rsm-choropleth-map') (suponiendo que el nombre de la clase es rsm-choropleth-map). Luego actualizamos su atributo de transformación utilizando la información pasada en el evento de zoom con attr('transform', e.transform).

Nota: Asegúrate de que el elemento del contenedor de coropletas tenga el nombre de clase rsm-choropleth-map (o actualiza el nombre de clase utilizado en la función select).</svgsvgelement,>

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Evento de zoom de d3 no se dispara para el gráfico de cloropeto SVG creado en Storybook usando Nivo Charts.

Answer

davy.ai