Wie zu implementieren D3 Lasso-Plugin mit Angular 2 und Typescript

Question

Ich versuche, das Lasso-Plugin von Speros Kokenes (https://github.com/skokenes/D3-Lasso-Plugin) in einem Angular 2-Projekt mit Typescript erstellt zu verwenden. Ich habe D3 v4 funktioniert gut in meinem Projekt, aber wenn ich versuche, das Lasso-Plug-in hinzuzufügen, stoße ich auf Probleme, weil es keine .d.ts-Datei hat.

Ich habe versucht, ein vergebens (über meine aktuellen Fähigkeiten) zu erstellen und ich habe versucht, es direkt als einfaches JS-Skript mit der declare var Lasso: any; Syntax einzuschließen. Hat jemand ein Beispiel für die Implementierung eines D3-Plug-Ins in Angular2?

Vielen Dank im Voraus.

Edit: Ich habe ein wenig näher und in der Lage, das Plug-in in das Projekt aufgenommen und Code wird ausgeführt. Das Plug-in verweist jedoch auf die D3.js-Kernfunktionalität. Leider ist das d3-Objekt undefiniert, wenn das Plugin aufgerufen wird. Ich gehe davon aus, dass es auf die Referenz global.d3 verweisen muss, aber ich muss noch einen Weg finden, um darauf zuzugreifen. Ich ging zurück und schaute auf andere d3 Plug-Ins für Hinweise, wie man es referenziert, aber es sieht so aus, als ob dies das einzige ist.

Answer 1

Ich arbeite an dem gleichen Problem. Ich habe ein paar Lösungen gefunden.

Option 1

eine globale Variable in Ihrer Klasse.

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

es möglich ist, nur die d3-lasso.js Code-Hack im d3 Objekt zu nehmen.

function lasso(d3) {...} 

und es dann in Ihre ts nennen Datei

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")); 
    } 

aber sagen, dass ich auf eine andere Lösung arbeiten, denn jedes Mal, wenn wir npm installieren rufen, ich werde dies wieder zu beheben haben ...