javascript - 从 geojson 动态创建的 svg 路径不会渲染到 ref

Question

我正在尝试将 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 拼写错误

Answer 1

如果有人遇到与我相同的问题，我可以使用以下代码解决我的问题

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>
  );
};