我正在尝试将 geojson 的缩略图渲染到附加有反应引用的组件。当我检查生成的 HTML 时，我没有看到正确生成的路径。我正在使用 React v16.8 和 d3 v4。
我尝试使用子 svg 和 g 标签渲染包装 div，并在 g 标签上添加 ref，以允许我使用 d3.select() 选择它。我尝试过使用 d3.geoMercator 和 d3.geoEquirectangular 投影来渲染这些缩略图，尽管我承认我不确定应该使用哪个投影。
我的 React 组件的唯一支撑是我尝试渲染的 geojson 特征集合。
我的 react 组件
import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import styles from './FieldThumbnail.module.css';
const FieldThumbnail = ({ features }) => {
const thumbnailRef = useRef(null);
useEffect(() => {
const projection = d3.geoMercator();
const geoGenerator = d3.geoPath().projection(projection);
const path = d3.select(thumbnailRef.current)
.selectAll('path')
.data(features);
path.enter()
.append('path')
.attr('d', geoGenerator);
}, []);
return (
<div className={styles.Wrapper}>
<svg height="40" width="40">
<g ref={thumbnailRef} />
</svg>
</div>
);
};
输入功能
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-97.06238411355118,
46.66007712465975
],
[
-97.06238654102437,
46.66060733590856
],
[
-97.06238654139973,
46.66060750434915
],
[
-97.06238644140076,
46.661431595904915
],
[
-97.06238674139782,
46.66229038747972
],
[
-97.06238644145236,
46.663114762652846
],
[
-97.06239304024501,
46.66393671226661
],
[
-97.0623930413871,
46.66393696959281
],
[
-97.0623937413871,
46.66476206959281
],
[
-97.06239374139606,
46.66476211677575
],
[
-97.06239336028281,
46.66557636524648
],
[
-97.06239863304502,
46.665634543364305
],
[
-97.06239791615813,
46.665658425606324
],
[
-97.06241411853628,
46.66581284603718
],
[
-97.0624112,
46.6661285
],
[
-97.06234765642895,
46.666129545305495
],
[
-97.0623186,
46.666262
],
[
-97.06200953177694,
46.66625744796783
],
[
-97.06124286206398,
46.666154658652914
],
[
-97.06028066749977,
46.666154758393205
],
[
-97.0593891312092,
46.66615795816455
],
[
-97.05938876307162,
46.66615795763225
],
[
-97.05850965673073,
46.66615226018354
],
[
-97.05756025035363,
46.66616655425723
],
[
-97.05755856467987,
46.66616654076708
],
[
-97.05658713774089,
46.66613635857206
],
[
-97.0555977110783,
46.66613665839832
],
[
-97.05460938890265,
46.66613635839831
],
[
-97.05376476748825,
46.66613601706834
],
[
-97.0531983161824,
46.66612767423534
],
[
-97.0519759,
46.666127
],
[
-97.0519341,
46.6661256
],
[
-97.0518525,
46.6661183
],
[
-97.0518124,
46.666114
],
[
-97.0518007,
46.6661105
],
[
-97.05179884236591,
46.665836963379924
],
[
-97.05183641642574,
46.665537000634096
],
[
-97.05182556496702,
46.66496137554801
],
[
-97.05182557145734,
46.66495974006025
],
[
-97.05183946055104,
46.664441347124495
],
[
-97.05184165783389,
46.66390071566316
],
[
-97.05183586058264,
46.66334957698335
],
[
-97.05183585946538,
46.663348950938655
],
[
-97.05183995864775,
46.66275906859935
],
[
-97.05184015845515,
46.6622377710426
],
[
-97.05182836656844,
46.66167865573636
],
[
-97.05182836032469,
46.6616775483929
],
[
-97.05183415736988,
46.661086649578706
],
[
-97.05183035947731,
46.66054385077147
],
[
-97.05183035978149,
46.660543308984145
],
[
-97.05183454720722,
46.66002760424077
],
[
-97.05162441075764,
46.65923371474022
],
[
-97.051619,
46.6590704
],
[
-97.05170906852015,
46.659023533069984
],
[
-97.05177856215117,
46.6590258330956
],
[
-97.05179237024724,
46.65898018722389
],
[
-97.0518377,
46.6589566
],
[
-97.05242476581331,
46.65895928990854
],
[
-97.05253539800736,
46.65896670167181
],
[
-97.05289352892655,
46.65896560297336
],
[
-97.05291680463425,
46.65896655737476
],
[
-97.05375532515048,
46.65896515867499
],
[
-97.05459239937686,
46.658963058739644
],
[
-97.05542938866525,
46.65896045877292
],
[
-97.05624908620027,
46.658958558767495
],
[
-97.0571170554794,
46.65895505889137
],
[
-97.05711728885902,
46.65895505871015
],
[
-97.05792398885903,
46.65895705871015
],
[
-97.05792403801641,
46.65895705886574
],
[
-97.05875492064217,
46.65896025841376
],
[
-97.0596070032681,
46.65895795873053
],
[
-97.0604477070616,
46.65895595871968
],
[
-97.0612671994083,
46.658953658741154
],
[
-97.06126724159928,
46.658953658647576
],
[
-97.06212383695828,
46.658952262891646
],
[
-97.062227334746,
46.658936968087595
],
[
-97.0624777,
46.6589362
],
[
-97.06247598471079,
46.65912171691101
],
[
-97.06248948834437,
46.65912261215364
],
[
-97.0625928,
46.6591661
],
[
-97.06258807528533,
46.65932349830312
],
[
-97.06238411355118,
46.66007712465975
]
]
]
]
},
}
]
}
预期结果:应该出现缩略图大小的 geojson 渲染。
实际结果:没有渲染缩略图，也没有错误。
编辑:修复了 d3.select 拼写错误
最佳答案
如果有人遇到与我相同的问题，我可以使用以下代码解决我的问题
import React, { useEffect, useRef } from 'react';
import { geoMercator, geoPath } from 'd3-geo';
import { select } from 'd3-selection';
const FieldThumbnail = ({ features }) => {
const HEIGHT = 40;
const WIDTH = 40;
const thumbnailRef = useRef(null);
useEffect(() => {
const projection = geoMercator().fitSize([HEIGHT, WIDTH], features);
const path = geoPath().projection(projection);
select(thumbnailRef.current)
.selectAll('path')
.data(features.features)
.enter()
.append('path')
.attr('d', path)
.style('fill', '#E6E6E6')
.style('stroke-width', '1')
.style('stroke', '#999999');
}, []);
return (
<svg height={HEIGHT} width={WIDTH}>
<g ref={thumbnailRef} />
</svg>
);
};
关于javascript - 从 geojson 动态创建的 svg 路径不会渲染到 ref，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57117599/