Dynamically created svg paths from geojsons are not rendering to a ref

Question

I am attempting to render a thumbnail of a geojson to a component with a react ref attached to it. When I inspect the generated HTML, I am not seeing paths generating properly. I am using react v16.8 and d3 v4.

I have tried to render a wrapper div with a child svg and g tags with a ref on the g tag to allow me to select it using d3.select(). I have tried using d3.geoMercator and d3.geoEquirectangular projections to try to render these thumbnails, although admittedly I am unsure which projection I should be using.

The only prop to my react component is the geojson feature collection I am trying to render.

My react component

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

The input features

{
  "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
              ]
            ]
          ]
        ]
      },
    }
  ]
}

Expected result: a thumbnail sized rendering of the geojson should appear.

Actual result: no thumbnail is rendered and there are no errors.

Edit: fixed d3.select typo

Your choice of projection (type) is not very important really - but what is are the parameters you provide it. If you use d3.geoMercator(), the default projection parameters are intended to show the world across an area 960px x 500px, your square is 40x40, you're probably only showing the Bering Sea and some of Alaska: the projection is indifferent to the size of your projection area and what features you will eventually render. You need to set the parameters. You could use something like `projection.fitSize` or `fitExtent` to modify projection parameters to center and scale your features. — Andrew Reid, Jul 19 '19 at 18:11
See [this answer](https://stackoverflow.com/a/40940028/7106086) for fitting a single geojson object, or [this](https://stackoverflow.com/a/45470054/7106086) one for fitting an array of geojson objects. These answers use projection.fitSize and/or projection.fitExtent to set the projection translate and scale values to show an appropriate area in the specified dimensions. — Andrew Reid, Jul 19 '19 at 18:13

score 1 · Accepted Answer · answered Jul 19 '19 at 22:03

If anyone struggles with the same issue that I did, I was able to solve my problem with the following code

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

This still works without the `useRef` (eg, using `select("g#someID")`. I know useRef is advised (and easy) - is it necessary given that `useEffect` doesn't run until the DOM has updated? — Trevedhek, Nov 19 '19 at 19:09

Dynamically created svg paths from geojsons are not rendering to a ref

1 Answers1