Comment implémenter le plugin lasso D3 avec Angular 2 et Typescript

Question

J'essaye d'utiliser le plugin lasso créé par Speros Kokenes (https://github.com/skokenes/D3-Lasso-Plugin) dans un projet Angular 2 en utilisant Typescript. J'ai D3 v4 fonctionne bien dans mon projet, mais quand j'essaye d'ajouter la prise de lasso je rencontre des problèmes parce qu'il n'a pas de fichier .d.ts.

J'ai essayé de créer un en vain (au-delà de mes compétences actuelles) et j'ai essayé de l'inclure directement comme script JS en utilisant la syntaxe declare var Lasso: any;. Quelqu'un at-il un exemple d'implémentation d'un plug-in D3 avec Angular2?

Merci d'avance.

Editer: Je me suis un peu rapproché et j'ai réussi à intégrer le plug-in dans le projet et le code est en cours d'exécution. Cependant, le plug-in fait référence à la fonctionnalité principale de D3.js. Malheureusement, l'objet d3 n'est pas défini lorsque le plugin 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é le moyen d'y accéder. Je suis retourné et regardé d'autres plug-ins d3 pour des indices comment le référencer, mais il semble que ce soit le seul.

Answer 1

Je travaille sur ce même problème. J'ai trouvé deux solutions.

Option 1

Faire 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(); // <-- here 
    } 

    initializeLasso() { 
     lasso() // <-- no need to use this.d3 as a parameter 
     .items(this.d3.selectAll(".myCircles")) 
     .targetArea(this.d3.select(".backgroundRectangle")); 
    } 
} 

Option 2

Il est possible de pirater juste le code d3-lasso.js à prendre dans l'objet d3.

function lasso(d3) {...} 

puis appelez dans votre fichier ts

import { lasso } from 'd3-lasso'; 

    // ... 

    initializeLasso() { 
     lasso(this.d3) // <-- use this.d3 as a parameter 
     .items(this.d3.selectAll(".myCircles")) 
     .targetArea(this.d3.select(".backgroundRectangle")); 
    } 

Cela étant dit, je travaille sur une autre solution, parce que chaque fois que nous appelons installer NPM, je vais devoir corriger ce nouveau ...