TypeError: selection.interrupt is not a function (using ZoomableGroup wih buttons)

[Aljal]

Hi,

First of all thank you for this amazing library.

Description

I'm using react-simple-maps in a project and I am facing an issue using ZoomableGroup wih buttons (zoom in and out).

Here is my code:

const MapChart = () => {
  const [zoom, setZoom] = useState(1);

  const handleZoomIn = () => {
    if (zoom >= 4) return;
    setZoom(zoom * 2);
  }

  const handleZoomOut = () => {
    if (zoom <= 1) return;
    setZoom(zoom / 2);
  }

  return (
    <div>
      <div className='controls'>
        <a onClick={handleZoomIn}><PlusSquare /></a>
        <a onClick={handleZoomOut}><MinusSquare /></a>
      </div>
      <ComposableMap data-tip='' projectionConfig={{ scale: 70 }} width={500} height={200}>
        <ZoomableGroup
          zoom={zoom}
          onMoveEnd={() => { }}
          onMoveStart={() => { }}
        >
          <Geographies geography={jsonGeography}>
            {({ geographies }) =>
              geographies.map(geo => {
                const { NAME, ISO_A2 } = geo.properties;

                return (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                  />
                );
              })
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </div>
  );
};

The error appear when clicking the zoom in link <a onClick={handleZoomIn}><PlusSquare /></a> (where <PlusSquare /> is a simple svg).

Here is the error:

Uncaught TypeError: selection.interrupt is not a function
    at push../node_modules/d3-zoom/src/zoom.js.__webpack_exports__.default.zoom.transform (zoom.js:91)

It seems that the problem comes from d3-zoom or the multiple versions of d3-selection installed, I found this issue on github but I can't understand why and how to fix it. Is it because I'm using another package which uses d3-selection with another version ? How can I fix it ?

Expected behavior

The zoom should change according with the setZoom function without throwing an error.

Version:

package.json "react-simple-maps": "^2.3.0" package-lock.json

"react-simple-maps": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-2.3.0.tgz",
      "integrity": "sha512-IZVeiPSRZKwD6I/2NvXpQ2uENYGDGZp8DvZjkapcxuJ/LQHTfl+Byb+KNgY7s+iatRA2ad8LnZ3AgqcjziCCsw==",
      "requires": {
        "d3-geo": "^2.0.1",
        "d3-selection": "^2.0.0",
        "d3-zoom": "^2.0.0",
        "topojson-client": "^3.1.0"
      },
      "dependencies": {
        "d3-selection": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
          "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
        }
      }
    }

Thank you for your attention and sorry for my limited English skills.

[zimrick]

Hi @Aljal,

Thanks for using react-simple-maps!

Yes, I am assuming here that an older version of d3-selection/d3-zoom is causing the problem. Are you using another data visualization library in parallel with react-simple-maps?

Does it work if you install d3-selection/d3-zoom v2 (^2.0.0) explicitly?

[Aljal]

Does it work if you install d3-selection/d3-zoom v2 (^2.0.0) explicitly?

I tried but it doesn't work.

I works using a different version: "react-simple-maps": "2.1.2"