How to implement D3 lasso plugin with Angular 2 and Typescript

Question

I am trying to use the lasso plugin created by Speros Kokenes(https://github.com/skokenes/D3-Lasso-Plugin) in an Angular 2 project using Typescript. I have D3 v4 working fine in my project but when I try to add the lasso plug in I run into issues because it does not have a .d.ts file.

I have tried to create one to no avail (beyond my current skillset) and I have tried to just include it directly as plain JS script using the declare var Lasso: any; syntax. Does anyone have an example of implementing a D3 plug-in in with Angular2?

Thanks in advance.

Edit: I have gotten a little closer and able to get the plug-in included into the project and code is being executed. However the plug-in is referencing D3.js core functionality. Unfortunately the d3 object is undefined when the plugin is called, my assumption is that it needs to reference the global.d3 reference, but I have yet to find a way to access it. I went back and looked at other d3 plug ins for clues how to reference it however it looks like this is the only one.

Answer 1

I'm working on this same issue. I've come up with a couple of solutions.

Option 1

Make a global variable in your class.

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

It's possible to just hack the d3-lasso.js code to take in the d3 object.

function lasso(d3) {...}

and then call it in your ts file

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

That being said, I'm working on another solution, because every time we call npm install, I'll have to fix this again...