typescript types need update

[YikaJ]

Hi, dagre-d3 based on d3 v4.12.2, but in @types/dagre-d3, it's based on d3 v3. I hope it's types can update to the same version, THANKS A LOTS.

[yhvicey]

Workaround

1. Remove @types/dagre-d3;
2. Add @types/dagre and @types/d3;
3. Create customized .d.ts file, e.g.:

// dagre-d3.d.ts
// Copied from existing type definition @types/dagre-d3, with some modification
declare module "dagre-d3" {
  import * as d3 from "d3";
  import * as dagre from "dagre";
  export const render: { new (): Render };
  export const intersect: {
    [shapeName: string]: (
      node: dagre.Node,
      points: Array<{}>,
      point: any
    ) => void;
  };

  export interface Render {
    arrows(): {
      [arrowStyleName: string]: (
        parent: d3.Selection<d3.BaseType, any, d3.BaseType, any>,
        id: string,
        edge: dagre.Edge,
        type: string
      ) => void;
    };
    (
      selection: d3.Selection<d3.BaseType, any, d3.BaseType, any>,
      g: dagre.graphlib.Graph
    ): void;
    shapes(): {
      [shapeStyleName: string]: (
        parent: d3.Selection<d3.BaseType, any, d3.BaseType, any>,
        bbox: any,
        node: dagre.Node
      ) => void;
    };
  }
}

If you're also using d3-zoom:

1. Add d3-zoom as well as @types/d3-zoom;
2. Create your zoom as usual;
3. Replace select().call() with below type params:

// Create zoom
const graphZoom = zoom().on("zoom", () => {
  const container = select(svgId).select("g");
  container.attr("transform", event.transform);
});

// Update your 'select().call()' call, add needed type params
select<Element, any>(svgId).call(graphZoom);