Búsqueda de sitios web

d3.js - No se puede importar d3-tip en una clase de Typescript


Estoy intentando importar d3-tip en una de mis clases de TypeScript.

index.d.ts de d3-tip se ve de la siguiente manera

import { Primitive } from "d3";

declare module "d3" {
    type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se");
    interface Tooltip {
        hide(): Tooltip;
        show(): Tooltip;
        show<Datum>(data: Datum[]): Tooltip;
        show(target: SVGElement): Tooltip;
        show<Datum>(data: Datum[], target: SVGElement): Tooltip;
        attr(name: string): string;
        attr(name: string, value: Primitive): Tooltip;
        attr<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive): Tooltip;
        attr<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }): Tooltip;
        style(name: string): string;
        style(name: string, value: Primitive, priority?: string): Tooltip;
        style<Datum>(name: string, value: (datum: Datum, index: number, outerIndex: number) => Primitive, priority?: string): Tooltip;
        style<Datum>(obj: { [key: string]: Primitive | ((datum: Datum, index: number, outerIndex: number) => Primitive) }, priority?: string): Tooltip;
        offset(): [number, number];
        offset(tuple: [number, number]): Tooltip;
        offset<Datum>(func: (datum: Datum, index: number, outerIndex: number) => [number, number]): Tooltip;
        direction(): TooltipDirection;
        direction(direction: TooltipDirection): Tooltip;
        direction<Datum>(func: (datum: Datum, index: number, outerIndex: number) => TooltipDirection): Tooltip;
        html(): string;
        html(content: string): Tooltip;
        html<Datum>(func: (datum: Datum, index: number, outerIndex: number) => string): Tooltip;
        rootElement(): HTMLElement;
        rootElement(element: HTMLElement): Tooltip;
        rootElement<Datum>(func: (datum: Datum, index: number, outerIndex: number) => HTMLElement): Tooltip;
        destroy(): Tooltip;
    }
    export function tip(): Tooltip;
}

He intentado importar así

import * as d3tip from 'd3-tip';

o así

import tip from 'd3-tip';

pero en ninguno de los dos casos puedo usar la función tip.

Respuesta #1

Puedes intentar hacerlo de esta manera:

import d3Tip from "d3-tip";
d3.tip = d3Tip;

Respuesta #2

Importar, lo cual funciona para mí: estoy usando d3v5 y Angular 8

importar d3Tip desde "d3-tip"; const tip=d3Tip();