我是新手react-simple-maps，我不确定如何将缩放功能应用于选择的县。
下面是包含CovidSearchState选定美国州和选定县州的 useState 的父组件。
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import MapChart from '../covid/Map';
import Spinner from 'react-bootstrap/Spinner'
import CategorySearch from '../covid/CategorySearch'
import ReactTooltip from "react-tooltip";
import { categoriesObj} from '../data/covidCategoriesName'
import CovidSearchState from '../covid/CovidSearchState'
type CovidDataState = {
fips_code: number,
State_name: string,
County: string,
Cases_7_day_count_change: number,
deaths_7_day_count_change: number,
population_density_2019: number,
avg_hh_size: number,
percent_uninsured_2019: number,
poverty_rate_2019: number,
Percent_65_plus: number,
total_hospitals_reporting: number,
admissions_covid_confirmed_last_7_days: number,
admissions_covid_confirmed_last_7_days_per_100_beds: number,
percent_adult_inpatient_beds_used_confirmed_covid: number,
percent_adult_icu_beds_used_confirmed_covid: number,
percent_positive_14_day: number,
school_composite: string
}
interface covidProps{
stateName?: string;
countyName?: string;
info?: keyof CovidDataState;
map?: boolean
}
const CovidData = (prop:covidProps) => {
const [covid, SetCovid] = useState<CovidDataState[]>([])
const [errorMessage,SetErrorMessage] = useState(null)
const [loading, setLoading] = useState(true)
const [field, setField] = useState('')
const [content, setContent] = useState("");
const [state, setState] = useState("");
const [county, setCounty] = useState("");
const [center, setCenter] = useState('')
useEffect(() => {
axios.get("https://covid-cdc-api.herokuapp.com/covid-data")
.then((response) => {
const apiCovidData = response.data.integrated_county_latest_external_data;
SetCovid(apiCovidData);
setLoading(false);
})
.catch((error) => {
SetErrorMessage(error.message);
// console.log(errorMessage);
})
}, []);
const fieldSelected = (category:string) :any => {
setField(category)
}
const stateSelected = (stateName:string) :any => {
setState(stateName)
}
const countySelected = (countyName:string) :any => {
setCounty(countyName)
}
const testing:string = "Washington"
// setCenter(testing)
if(prop.map){
return(
<div>
<CovidSearchState onStateSelected={stateSelected} onCountySelected={countySelected}/>
Select a Categories
<CategorySearch onFieldSelected={fieldSelected}/>
{loading?
<Spinner animation="border" role="status" variant="primary">
<span className="sr-only">Loading...</span>
</Spinner> : <div>
<MapChart data={covid} field={field} setTooltipContent={setContent} />
<ReactTooltip>{content}</ReactTooltip></div>}
</div>
)
}
else if (prop.countyName && prop.stateName && prop.info){
let covidData:any = covid.find(state => state.State_name === prop.stateName && state.County === prop.countyName);
if(!covidData)
return <p>Info not found!</p>
return(
<div>
{covidData[prop.info]}
</div>
)}
else {
return(
<div>Data not found!</div>
)
}
};
export default CovidData;
下面是我的地图组件
import React, { memo, useState, useEffect } from "react";
import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps";
import { scaleQuantile } from "d3-scale";
// import { csv } from "d3-fetch";
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json";
const MapChart = (props) => {
const data = props.data
const field = props.field || 'Cases_7_day_count_change'
const setTooltipContent = props.setTooltipContent
const colorScale = scaleQuantile()
.domain(data.map(d => d[field]))
.range([ //change the color range here
"#ffedea",
"#ffcec5",
"#ffad9f",
"#ff8a75",
"#ff5533",
"#e2492d",
"#be3d26",
"#9a311f",
"#782618"
]);
return (
<ComposableMap data-tip="" projectionConfig={{ scale: 900 }}projection="geoAlbersUsa">
<ZoomableGroup zoom={1}>
<Geographies geography={geoUrl}>
{({ geographies }) =>
geographies.map(geo => {
const cur = data.find(s => {
return (s.fips_code == geo.id)});
return (
<Geography
key={geo.rsmKey}
geography={geo}
fill={cur ? colorScale(cur[field]) : "#EEE"}
onMouseEnter={() => {
const { name, } = geo.properties;
const id = geo.id;
setTooltipContent(
`${cur.State_name}, ${name} - ${cur[field]}
`); // cur here is our data
}}
onMouseLeave={() => {
setTooltipContent("");
}}
style={{
default: {
// fill: "#D6D6DA",
outline: "none"
},
hover: {
// fill: "#F53",
outline: "solid"
},
pressed: {
// fill: "#E42",
outline: "none"
}
}}
/>
);
})
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
);
};
export default MapChart;