[Solved]-Argument of type 'string | null' is not assignable to parameter of type 'ValueFn<SVGPathElement, Datum[], string | number | boolean | null>'-Reactjs

this question is the typescript equivalent of various types of javascript questions that pop up every now and then where the developer confuses passing a function by reference with calling said function in situ whereby just passing its return value.

you are actually calling, i.e. executing, the line generator by doing linegenerator(data). as you can see from the api docs and the type definitions this will return either a string or null:

export interface line<datum> {
  (data: datum[]): string | null;
  //...
}

this does not match the signature of the .attr() method, though, which in this case expects a function to be passed as the second argument.

export interface selection<gelement extends basetype, datum, pelement extends basetype, pdatum> {
  //...
  attr(name: string, value: valuefn<gelement, datum, string | number | boolean | null>): this;
  //...
}

the solution is to pass the generator to .attr() without executing it:

.attr('d', linegenerator)

the generator will then be executed by the inner workings of .attr() being passed the data bound to the selection. that, in turn, will return the path definition string for the d attribute of the path.