react d3 中国地图的简单使用 尚未完善

refer: http://siwei.me/blog/posts/d3-svg-path

https://observablehq.com/@d3/testing-projection-visibility?collection=@d3/d3-geo

1.首先安装:

npm install d3 topojson

或者使用

yarn add d3 topojson

2.

react中引入:

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import china from './china.json'; // 导入拓扑数据

3.同样，创建钩子:

const ChinaMap = () => {
const svgRef = useRef(null);
useEffect(() => {
const svgElement = d3.select(svgRef.current);
// 创建地理投影
const projection = d3
.geoMercator()
.center([105, 38])
.scale(600)
.translate([500, 500]);
// 创建路径生成器
const pathGenerator = d3.geoPath().projection(projection);
// 渲染地图路径
svgElement
.selectAll('path')
.data(china.features)
.enter()
.append('path')
.attr('d', pathGenerator)
.attr('stroke', '#333')
.attr('fill', 'lightblue');
}, []);
return <svg ref={svgRef} width="1000" height="1000" />;
};

上面的例子里使用了 D3 的

select

方法选择 SVG 元素，创建一个地理投影

projection

用于将地理坐标转换为屏幕坐标。 然后，我们创建一个路径生成器

pathGenerator

，它将根据地理投影生成路径

多写几个例子应该会熟悉一点。

4.最后svg来渲染:

import React from 'react';
import ChinaMap from './ChinaMap';
const App = () => {
return (
<div className="App">
<h1>China Map</h1>
<ChinaMap />
</div>
);
};
export default App;

我这里其实是出错了，调整后，还是不行。。。。。

Demo：https://github.com/120821/react_learn_for_d3_svg_path_20230912