Ozzah Ozzah - 12 days ago 7
TypeScript Question

d3 v4 TypeScript types

I'm putting together a little d3 project and since it's quite complex, I wanted to use TypeScript to make some of the development a bit simpler and less error-prone.

I'm using d3 v4. I think I was using the wrong type definition file before, but I didn't run into any problems for a long time until it eventually complained that

d3
does not contain a definition for
scaleLinear()
.

I've since moved to what I believe is the correct definition file, which does have a definition for
d3.scaleLinear()
, however now a significant number of my variables have invalid types.

Here are some examples:

public SVGElement : d3.Selection<SVGElement>;
public SVGTitleArea : d3.Selection<SVGGElement>;
public SVGLegendArea : d3.Selection<SVGGElement>;
public SVGXAxisArea : d3.Selection<SVGGElement>;
public SVGYAxisArea : d3.Selection<SVGGElement>;
public SVGChartArea : d3.Selection<SVGGElement>;


I used to create these like this:

this.SVGElement = d3.Select("body").append("svg");
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");


etc.

I also have a number of functions that render different components of the graph:

public RenderTitle() : d3.Selection<SVGGElement> {
this.SVGTitleArea = <d3.Selection<SVGGElement>>this.SVGElement.append("g");

// Do stuff here

return this.SVGTitleArea;
}


Ever since moving to the probably-correct typings file, it now complains that the
d3.Selection
type expects 4 types:

interface Selection<GElement extends Element | EnterElement | Window, Datum, PElement extends Element | EnterElement | Window, PDatum>


Now, I know it's not ideal and I would prefer a stronger typing, but I've managed to at least fix the errors with respect to the variable definitions:

public SVGElement : d3.Selection<SVGElement, any, any, any>;
public SVGTitleArea : d3.Selection<SVGGElement, any, any, any>;
public SVGLegendArea : d3.Selection<SVGGElement, any, any, any>;
public SVGXAxisArea : d3.Selection<SVGGElement, any, any, any>;
public SVGYAxisArea : d3.Selection<SVGGElement, any, any, any>;
public SVGChartArea : d3.Selection<SVGGElement, any, any, any>;


But I can't do the same for the render functions:

public RenderTitle() : d3.Selection<SVGGElement, any, any, any>


I've tried hovering over the calls that create, for example, the
<g>
element to see exactly what the signature should be, but it actually gives the
, any any any>
.

What is my best option here? Is there a simple way to fix these types? Should I just leave them all as
any
? Should I downgrade to d3 v3? Should I keep using v4 and abandon TypeScript?

Thank you.

Answer

Exactly where your problem is I do not see. This is possible:

let mySelection : d3.Selection<SVGElement, {}, HTMLElement, any> = d3.selectAll<SVGElement, {}>('#line');
function foo() : d3.Selection<SVGElement, {}, HTMLElement, any> {
  return mySelection.append<SVGElement>('g')
}
alert(foo().node().tagName)