javascript - 直到 mouseEnter 事件才加载简单的 React Map 层

问题描述

地图渲染和颜色填充也会发生，但只有当鼠标进入事件发生时。如何在加载时触发它？我正在使用 react-simple-maps，JSON 数据是有效的，因为它在鼠标进入时加载地图。这是源代码 - Github

  const [tooltipContent, setTooltipContent] = useState("");

  const colorScale = scaleQuantile()
    .domain(props.data.map((d) => d.value))
    .range(COLOR_RANGE);

  const onMouseEnter = (geo, current = { value: "NA" }) => {
    return () => {
      setTooltipContent(`${geo.properties.name}: ${current.value}`);
    };
  };

  const onMouseLeave = () => {
    setTooltipContent("");
  };
  return (
    <div>
      <ReactTooltip>{tooltipContent}</ReactTooltip>

      <ComposableMap
        projectionConfig={PROJECTION_CONFIG}
        projection="geoMercator"
        width={700}
        height={600}
        data-tip=""
      >
        <Geographies geography={INDIA_TOPO_JSON}>
          {({ geographies }) =>
            geographies.map((geo) => {
              const current = props.data.find((s) => {
                return s.id === geo.id;
              });
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill={current ? colorScale(current.value) : DEFAULT_COLOR}
                  style={geographyStyle}
                  onMouseEnter={onMouseEnter(geo, current)}
                  onMouseLeave={onMouseLeave}
                />
              );
            })
          }
        </Geographies>
      </ComposableMap>
    </div>
  );
}

标签： javascriptreactjsd3.js

javascript - 直到 mouseEnter 事件才加载简单的 React Map 层

问题描述

解决方案

推荐阅读