Comment mettre en œuvre le plugin D3 lasso avec Angular 2 et Typescript

Question

Je suis en train d'essayer d'utiliser le plugin lasso créé par Speros Kokenes (https://github.com/skokenes/D3-Lasso-Plugin) dans un projet Angular 2 utilisant Typescript. J'ai D3 v4 fonctionnant bien dans mon projet mais quand j'essaie d'ajouter le plug-in lasso, je rencontre des problèmes car il n'a pas de fichier .d.ts.

J'ai essayé d'en créer un sans succès (au-delà de mes compétences actuelles) et j'ai essayé de l'inclure directement en tant que script JS pur en utilisant la syntaxe declare var Lasso: any;. Est-ce que quelqu'un a un exemple d'implémentation d'un plug-in D3 avec Angular2?

Merci d'avance.

Edit : J'ai progressé un peu et suis capable d'inclure le plug-in dans le projet et le code s'exécute. Cependant, le plug-in fait référence à la fonctionnalité de base de D3.js. Malheureusement, l'objet d3 est indéfini lorsque le plug-in est appelé, mon hypothèse est qu'il doit faire référence à la référence global.d3, mais je n'ai pas encore trouvé de moyen d'y accéder. Je suis retourné voir d'autres plug-ins d3 pour des indices sur la façon de le référencer mais il semble que c'est le seul.

Answer 1

Je travaille sur le même problème. J'ai trouvé quelques solutions.

Option 1

Créez une variable globale dans votre classe.

import { lasso } from 'd3-lasso';

export class Graph {
   private d3: D3;

   constructor(
      private d3Service: D3Service,    
   ) { 
      this.d3 = this.d3Service.getD3();    
      window["d3"] = this.d3Service.getD3(); // <-- ici
   }

   initializeLasso() {
      lasso() // <-- pas besoin d'utiliser this.d3 en tant que paramètre
         .items(this.d3.selectAll(".myCircles"))
         .targetArea(this.d3.select(".backgroundRectangle"));
   }
}

Option 2

Il est possible de modifier le code de d3-lasso.js pour prendre en compte l'objet d3.

function lasso(d3) {...}

et ensuite l'appeler dans votre fichier ts

    import { lasso } from 'd3-lasso';

    // ...

    initializeLasso() {
       lasso(this.d3) // <-- utiliser this.d3 comme paramètre
         .items(this.d3.selectAll(".myCircles"))
         .targetArea(this.d3.select(".backgroundRectangle"));
    }

Cela dit, je travaille sur une autre solution, car à chaque fois que nous exécutons npm install, je devrai corriger cela à nouveau...