Hur man implementerar D3 lasso-plugin med Angular 2 och Typescript

Jag försöker använda lasso-pluginet skapat av Speros Kokenes (https://github.com/skokenes/D3-Lasso-Plugin) i ett Angular 2-projekt med Typescript. Jag har D3 v4 som fungerar bra i mitt projekt, men när jag försöker lägga till lasso-pluginet stöter jag på problem eftersom det inte har en .d.ts-fil.

Jag har försökt skapa ett utan framgång (utöver min nuvarande kompetensnivå) och jag har försökt att bara inkludera det direkt som ett vanligt JS-skript med syntaxen declare var Lasso: any;. Har någon ett exempel på att implementera ett D3-tillägg med Angular2?

Tack i förväg.

Redigera: Jag har kommit lite närmare och lyckats få plug-in att inkluderas i projektet och koden körs. Dock refererar plug-inet till D3.js kärnfunktionalitet. Tyvärr är d3-objektet odefinierat när plug-inet kallas, min antagning är att det behöver referera till global.d3-referensen, men jag har ännu inte hittat ett sätt att få åtkomst till det. Jag gick tillbaka och tittade på andra d3-plug-ins för ledtrådar om hur man refererar till det, men det verkar som att detta är det enda.

Svar #1

Jag arbetar med samma problem. Jag har kommit på ett par lösningar.

Alternativ 1

Skapa en global variabel i din klass.

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

Alternativ 2

Det är möjligt att bara hacka d3-lasso.js-koden för att ta emot d3-objektet.

function lasso(d3) {...}

och sedan kalla på det i din ts-fil

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

Med det sagt, arbetar jag på en annan lösning, eftersom varje gång vi kör npm install, måste jag åtgärda detta igen...