Reactjs 如何添加SVG/d3映射以响应本机？ 用例

我想创建一个React原生应用程序，在世界地图上用特殊的地图投影显示PostGIS数据库中存储的坐标

到目前为止我做了什么 我成功地将地图加载到我的web版本应用程序的React环境中。这是我实现的代码（仅包括保存映射的组件）：

import React，{useffect，useRef}来自“React”；
从“../../../../hoc/Auxiliary”导入辅助项；
从“./Backmap.module.css”导入样式；
从“d3”导入*作为d3；
从“topojson客户端”导入{feature}；
从“/../../../../../../land-50m”导入地块；
const Backmap=（道具）=>{
const mapContainer=useRef（null）；
让宽度=props.windowSize.windowWidth；
让高度=props.windowSize.windowHeight；
useffect（（）=>{
const svg=d3.select（mapContainer.current）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
常量g=svg.append（“g”）
让特征=特征（陆地，陆地。对象。陆地）。特征
设投影=d3.GeoAzimutaleQualarea（）
.中心（[180，-180]）
.旋转（[0，-90]）
.fitSize（[width，height]，{type:“FeatureCollection”，features:features}）
.clipAngle（150）
设path=d3.geoPath（）.projection（projection）
g、 选择全部（“陆地”）
.数据（特征）
.enter（）.append（“路径”）
.attr（“id”、“landmass”）
.attr（“d”，路径）；
}, [])
返回(

我还研究了如何实现SVG形状，甚至是映射以响应本机，并找到了几种方法：


（SVG）
（SVG）
（地图）

问题
但是，我无法使用这些解决方案实现任何映射。上面列表中的前两个没有提到任何映射实现，后一个似乎是非常早期的beta版本。因此我想知道这在React-Native中是否目前是可能的。有人知道在React-Native中插入SVG映射的方法吗？
这是pos可以在react native中创建d3映射。问题是您不能使用像d3.select（）这样的Dom选择器。
您需要使用本机svg。
阅读文档，了解如何安装和使用它。它的实现非常接近浏览器SVGAPI

导入Svg、G和路径组件

import Svg, { G, Path } from "react-native-svg";

以通常的d3方式创建投影和路径

let projection = d3.geoAzimuthalEqualArea()
.center([180, -180]).rotate([0, -90])
.fitSize([width, height], { type: "FeatureCollection", features: features })
.clipAngle(150)
let path = d3.geoPath().projection(projection)

特征也以同样的方式提取

let features = feature(landmass, landmass.objects.land).features

但是我们不使用d3附加组件，而是直接附加Svg和G组件

return (
<Svg width='100%' height='100%'>
   <G>
   </G>
</Svg> )

返回(
)

宽度和高度可根据需要设计样式

接下来将追加路径，但映射featurers数组以创建路径组件

return (
<Svg width='100%' height='100%'>
   <G>
      {features.map((feature, index) => {
        return (<Path d={path(feature)} key={index} stroke="black" fill="grey"></Path>)
      })}
   </G>
</Svg> )

返回(
{features.map（（feature，index）=>{
返回（）
})}
)

如果您在旋转svg时需要帮助，请在此答案的注释中提问。
这是一个很好的问题，我实际上在寻找类似的解决方案。.谢谢您提出这个问题。@Berke我找到了一种实现它的方法。您不能使用
d3.select（）
语句，因为React Native没有任何
文档
对象。但是您可以使用
d3.geoPath（）
函数，然后将屏幕坐标返回到
react native SVG
库的SVG
对象听起来是可能的。我实际上考虑过获取SVG代码并将其转换为react native SVG组件。您是否可以分享此问题的代码示例，甚至可以将其作为答案？
return (
<Svg width='100%' height='100%'>
   <G>
      {features.map((feature, index) => {
        return (<Path d={path(feature)} key={index} stroke="black" fill="grey"></Path>)
      })}
   </G>
</Svg> )