What is the right type for Graphviz renderer instance

Question

I am wondering about the right type for the graphviz renderer when programming in Typescript.

I have so far defined it as this:

type Graphviz = d3.Graphviz<HTMLElement, unknown, null, undefined>

This is the interface for the creation of Graphviz-renderer.

/**
 * Define methods which act as extensions to d3-selection
 */
declare module 'd3-selection' {
    interface Selection<GElement extends BaseType, Datum, PElement extends BaseType, PDatum> {
        /**
         * Returns a new graphviz renderer instance on the first element in the given selection. If a graphviz renderer instance already exists
         * on that element, instead returns the existing graphviz renderer instance.
         * @param options either a GraphvizOptions object representing the options of the graphviz renderer or a boolean representing the
         *                  useWorker option.
         */
        graphviz(options?: GraphvizOptions | boolean): Graphviz<GElement, Datum, PElement, PDatum>;

        /**
         * For each selected element, selects the first descendant element that matches the specified selector string in the same ways as
         * d3-selection.select, but does not propagate any associated data from the current element to the corresponding selected element.
         */
        selectWithoutDataPropagation(name: string): Selection<BaseType, Datum, PElement, PDatum>;
    }
}

I run into trouble when I want to define drag & drop. I try to define the call back functions:

const nodes = d3.select(div).selectAll('.node')
nodes.call(drag
    .on('start', this.onNodeDragStart)
    .on('drag', this.onNodeDragging)
    .on('end', this.onNodeDragEnd)
)

I cannot seem to match parameters in any matching type.

  onNodeDragStart (this: A, event: B, d: C) {}

with any set of parameters types (A, B, C) that works.

I believe that the problem is that I create the graphviz renderer as this:

_graphDiv?: HTMLElement

// some code here

const div = this._graphDiv
if (div !== undefined && div !== null) {
    this.graphviz = d3.select(div).graphviz()
}

I believe part of the problem are the different return types in the d3 overloads for select.

/**
 * Select the first element that matches the specified selector string. If no elements match the selector, returns an empty selection.
 * If multiple elements match the selector, only the first matching element (in document order) will be selected.
 *
 * The first generic  "GElement" refers to the type of element to be selected. The second generic "OldDatum" refers to the type of the
 * datum, on the selected element. This is useful when re-selecting an element with a previously set, know datum type.
 *
 * @param selector CSS selector string
 */
export function select<GElement extends BaseType, OldDatum>(selector: string): Selection<GElement, OldDatum, HTMLElement, any>;
/**
 * Select the specified node element.
 *
 * The first generic  "GElement" refers to the type of element to be selected. The second generic "OldDatum" refers to the type of the
 * datum, on the selected element. This is useful when re-selecting an element with a previously set, know datum type.
 *
 * @param node An element to be selected
 */
export function select<GElement extends BaseType, OldDatum>(node: GElement): Selection<GElement, OldDatum, null, undefined>;

Questions:

• How can I fix my issue for drag & drop? What is the right set of types for functions and Graphviz type definition?
• What are GElement and PElement in D3 selection definition? I haven't found a definition in the interface.
• Do I need to create my graphviz instance on a string selector instead of element to select?

Thank you in advance!