2

我使用了反应简单的地图，并想添加一个自定义缩放控件以根据按钮单击更改缩放级别。

import React, { memo, useState } from "react";
import {
  ZoomableGroup,
  ComposableMap,
  Geographies,
  Geography
} from "react-simple-maps";
import ReactTooltip from "react-tooltip";

const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";



export const MapChart = () => {
  const [tooltipContent, setTooltipContent] = useState("");
  const [zoomLevel, setZoomLevel] = useState(1);
  return (
    <>
      <ComposableMap height="400" data-tip="" projectionConfig={{ scale: 100 }}>
        <ZoomableGroup zoom={zoomLevel} >
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map(geo => (
                <Geography
                  // key={geo.rsmKey}
                  geography={geo}
                  onMouseEnter={() => {
                    const { NAME, POP_EST, POP_RANK } = geo.properties;
                    setTooltipContent(`${NAME} — ${POP_RANK}`);
                  }}
                  onMouseLeave={() => {
                    setTooltipContent("");
                  }}
                  style={{
                    default: {
                      fill: "#D6D6DA",
                      outline: ["black"]
                    },
                    hover: {
                      fill: "blue ",
                      outline: "none"
                    },
                    pressed: {
                      fill: "blue",
                      outline: "none"
                    }
                  }
                  }
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap >
      <ReactTooltip>{tooltipContent}</ReactTooltip>
      <button onClick={() => setZoomLevel(zoomLevel + 1)}>zoom</button>
      <div>legends</div>
    </>
  );
};

export default memo(MapChart);

不幸的是，当我尝试更改缩放时，最终出现以下错误 -

zoom.js:91 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)
    at Selection.call (call.js:4)
    at index.umd.js:1
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushPassiveEffects (react-dom.development.js:22820)
    at react-dom.development.js:22699
    at workLoop (scheduler.development.js:597)
    at flushWork (scheduler.development.js:552)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:164)

基本上，缩放不适用于 1 以外的任何值。

4

0 回答 0