反应-简单-地图呈现倒置地图

Question

我试图复制本例中所做的工作(除了在一个文件中而不是在2个文件中)：

https://codesandbox.io/s/map-chart-with-tooltip-xwijz?from-embed

发行：

我把一切都做好了，除了地图倒置。

我试过的：

使用投影(d3-geo.geoEqualEarth)的

• 希望该地图将从rendered
• modifying projectionConfig标度和旋转中获得其方向，希望其中任何一个都能改变在链接中找到的rendered
• modifying topojson文件的方式，并更改它的"transform“property
  • (注:我遇到了另一个问题，我认为这个问题与此无关，因为不需要修改原始的topojson文件就可以解决这个问题。传递文件路径以生成XHTTPRequest)

​

移除非必需组件(如ZoomableGroup

• modifying css )。

我的代码：

Map.js

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

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


const MapChart = React.memo(({ setTooltipContent }) => {
    return (
        <ComposableMap>
            <ZoomableGroup>
                <a data-tip="">
                    <Geographies geography={geoUrl}>
                        {geographies => 
                            geographies.map(geo => (
                                <Geography
                                    key={geo.rsmKey}
                                    geography={geo}
                                    onMouseEnter={() => {
                                        const {
                                            NAME, POP_EST
                                        } = geo.properties;
                                        setTooltipContent(
                                            `${NAME} - ${POP_EST}`
                                        );
                                    }}
                                    onMouseLeave={() => {
                                        setTooltipContent("");
                                    }}
                                    style={{
                                        default: {
                                            fill: "#D6D6DA",
                                            outline: "none"
                                        },
                                        hover: {
                                            fill: "#F53",
                                            outline: "none"
                                        },
                                        pressed: {
                                            fill: "#E42",
                                            outline: "none"
                                        }
                                    }}
                                />
                            ))
                        }
                    </Geographies>
                </a>
            </ZoomableGroup>
        </ComposableMap>
    )
})

function Map() {
    const [content, setContent] = useState("");
    return (
        <div>
            <MapChart setTooltipContent={setContent} />
            <ReactTooltip>
                <span>{content}</span>
            </ReactTooltip>
        </div>
    )
}

export default Map;

编辑：知道我在ComposableMap中修改projectionConfig不会修改地图，所以改变比例不会放大地图

Answer 1

查看示例中的react-simple-maps版本，它的"1.0.0-beta.0“

"dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-scripts": "3.0.1",
    "react-simple-maps": "1.0.0-beta.0",//here
   "react-tooltip": "latest"
  },

默认情况下，应强制npm安装最新版本。

npm install react-simple-maps@1.0.0-beta.0 

也改变了

 { geographies  =>
              geographies.map(geo => (

至

 {({ geographies }) =>
              geographies.map(geo => (