react 地图显示中国的所有省份 包含南海
json: https://github.com/120821/react_learn_for_d3_svg_path_20230912/blob/main/src/china_map_new.json
代码：
import React, { useEffect, useRef } from <span style="color:#abe338">'react</span>'<span style="color:#d4d0ab">;</span>
import * as d<span style="color:#f5ab35">3</span> from <span style="color:#abe338">'d3</span>'<span style="color:#d4d0ab">;</span>
//import chinaData from <span style="color:#abe338">'./china.json</span>'<span style="color:#d4d0ab">;</span>
import chinaData from <span style="color:#abe338">'./china_map_new.json</span>'<span style="color:#d4d0ab">;</span>
const ChinaMapForTooltip = () => {
const mapRef = useRef()<span style="color:#d4d0ab">;</span>
useEffect(() => {
const svg = d3.select(<span style="color:#ffa07a">mapRef.current</span>)<span style="color:#d4d0ab">;</span>
// 创建投影函数
const projection = d3.geoMercator()
.center([<span style="color:#ffa07a">105</span>, <span style="color:#f5ab35">38</span>])
.scale(<span style="color:#ffa07a">600</span>)
.fitSize([<span style="color:#ffa07a">800</span>, <span style="color:#f5ab35">800</span>], chinaData)<span style="color:#d4d0ab">;</span>
// 创建路径生成器
const path = d3.geoPath()
.projection(<span style="color:#ffa07a">projection</span>)<span style="color:#d4d0ab">;</span>
// 绘制地图路径
svg.selectAll(<span style="color:#abe338">'path</span>')
.data(<span style="color:#ffa07a">chinaData.features</span>)
.enter()
.append(<span style="color:#abe338">'path</span>')
.attr(<span style="color:#abe338">'d</span>', path)
.attr(<span style="color:#abe338">'fill</span>', <span style="color:#abe338">'none</span>')
.attr(<span style="color:#abe338">'stroke</span>', <span style="color:#abe338">'white</span>')
.attr(<span style="color:#abe338">'stroke-width</span>', <span style="color:#f5ab35">0.8</span>)
.on(<span style="color:#abe338">'mouseover</span>', handleMouseOver)
.on(<span style="color:#abe338">'mouseout</span>', handleMouseOut)<span style="color:#d4d0ab">;</span>
// 处理鼠标悬停事件
function handleMouseOver(<span style="color:#ffa07a">event</span>, d) {
d3.select(<span style="color:#ffa07a">this</span>)
.attr(<span style="color:#abe338">'fill</span>', <span style="color:#abe338">'none</span>')<span style="color:#d4d0ab">;</span>
// 在工具提示中显示省份名称
// 这里使用了示例的工具提示样式，你可以根据需要自定义样式
svg.append(<span style="color:#abe338">'text</span>')
.attr(<span style="color:#abe338">'id</span>', <span style="color:#abe338">'tooltip</span>')
.attr(<span style="color:#abe338">'x</span>', event.pageX + <span style="color:#f5ab35">10</span>)
.attr(<span style="color:#abe338">'y</span>', event.pageY - <span style="color:#f5ab35">10</span>)
.text(<span style="color:#ffa07a">d.properties.name</span>)<span style="color:#d4d0ab">;</span>
}
// 处理鼠标离开事件
function handleMouseOut() {
d3.select(<span style="color:#ffa07a">this</span>)
.attr(<span style="color:#abe338">'fill</span>', <span style="color:#abe338">'none</span>')<span style="color:#d4d0ab">;</span>
// 移除工具提示
svg.select('<span style="color:#f5ab35">#t</span>ooltip').remove()<span style="color:#d4d0ab">;</span>
}
}, [])<span style="color:#d4d0ab">;</span>
return (
<svg ref={mapRef} width={<span style="color:#f5ab35">1000</span>} height={<span style="color:#f5ab35">500</span>} />
)<span style="color:#d4d0ab">;</span>
}<span style="color:#d4d0ab">;</span>
export default ChinaMapForTooltip<span style="color:#d4d0ab">;</span>然后在app.js里引入即可,视图页面是这样的：
https://github.com/120821/react_learn_for_d3_svg_path_20230912/blob/main/src/all_provinces.png
