Typescript Error: .attr("d", d3.geoPath())

[jerometay]

Hi!

I'm developing a custom d3 map visual with geojson data.

The map is drawn with this d3 svg element declared as shown below.

let landSvg: d3.Selection<SVGElement, any, any, any> = this.svg.append('path')

When I try to append the path data in the attr("d") Typescript returns an error that no overload matches.

landSvg
   .datum({type: "FeatureCollection", features: this.geoData.data.features})
   .attr("d", d3.geoPath().projection(projection)) // Error here.

I copy out the last overload error as the other two clearly are not the issue.

Overload 3 of 4, '(name: string, value: ValueFn<SVGElement, { type: string; features: { type: string; properties: { Name: string; Description: string; }; geometry: { type: string; coordinates: number[][][]; }; }[]; }, string | number | boolean>): Selection<...>', gave the following error.
 Argument of type 'GeoPath<any, GeoPermissibleObjects>' is not assignable to parameter of type 'ValueFn<SVGElement, { type: string; features: { type: string; properties: { Name: string; Description: string; }; geometry: { type: string; coordinates: number[][][]; }; }[]; }, string | number | boolean>'.
 Types of parameters 'object' and 'datum' are incompatible.
 Type '{ type: string; features: { type: string; properties: { Name: string; Description: string; }; geometry: { type: string; coordinates: number[][][]; }; }[]; }' is not assignable to type 'GeoPermissibleObjects'.
 Property 'geometries' is missing in type '{ type: string; features: { type: string; properties: { Name: string; Description: string; }; geometry: { type: string; coordinates: number[][][]; }; }[]; }' but required in type 'ExtendedGeometryCollection<GeoGeometryObjects>'.

 The code compiles fine and the map draws beautifully if I were to simply declare landSvg as any, or if I shoehorn the projection method into a GeoPath<any,any> as shown below (which is my current workaround). But it annoys me that I cannot declare this correctly. Could someone teach me the correct way to declare my landSvg variable?

Thanks a lot!

Jerome Tay

landSvg
   .datum({type: "FeatureCollection", features: this.geoData.data.features})
   .attr("d", <GeoPath<any,any>>d3.geoPath().projection(projection))

[v-lionel-msft]

Hi @jerometay ,

Try to use this way.

GeoJson to Power BI Shape Maps. - YouTube

Best regards,
Lionel Chen

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[jerometay · Accepted solution]

Thanks for the reply Lionel, although I'm not sure where is the solution is in the video link you posted though.

In any case, for anyone else having the same problem, I have found the reason why the error appears.

The issue in my case is because the wrong version of @types/d3-selection was pulled in.

In the default version of the package.json that is created by pbiviz for new projects, the dependency for @types/d3 is 5.7.2 and the link for d3-selection is a @types/d3-selection@* instead of ^1 which pulls in the latest version that is supposed to be used in d3v6 instead of d3v5.

This issue causes other problems as well as the d3.event is unavailable (in v6 the event object is passed into the listener).

How to fix this is described here: 

Just change the liner in the package.json for @types/d3 to the latest v5 and the error will magically disappear. i.e. they fixed the link in the latest version.