Import EventDrops (D3.js) into Angular 2

Question

For a project I'm working on, I found an interesting library that I would like to import, but I don't know how.

The project is based on Angular 2, it runs through a SPA template through ASP.NET Core (in case it matters) and it gets built by webpack.

Until now I installed both D3 and EventDrops through NPM, than imported them into my component.ts file like this:

import * as d3 from 'd3';
import * as EventDrops from 'event-drops';

First I tested the D3.js import by adding:

ngOnInit() {
    var eventDropsChart = d3.select("#visual");
    console.log(eventDropsChart);
    ...
}

It seems to work, so I tried the next step that is:

var eventDropsChart = d3.chart.eventDrops();

But it does not work, because

TS2339: Property 'chart' does not exist on type 'typeof "mypath/node_modules/@types/d3/index"'

Could you please help me?

Thank you very much!

Answer 1

After some experiments I finally got it working but note that it is a workaround. Event drops hooks to the global d3 variable, not the declared import from the 'd3' module. So, you can use eventsDrop as in your example by using the window.d3.chart.eventsDrop(...) like this:

import {AfterViewInit, Component} from '@angular/core';
import * as d3 from 'd3';
import * as eventDrops from 'event-drops';

declare global {
    interface Window { d3: any; }
}

@Component({
  selector: 'some-selector',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements AfterViewInit{

  ngAfterViewInit(): void {
    console.log(d3, eventDrops, window.d3.chart.eventDrops)
    // or use window['d3'].chart.eventsDrop
    // or any of the answers here: https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript
     var eventDropsChart = window.d3.chart.eventDrops();
  }

}

Hope this helps! Good luck!

I'll update the answer if I find a more sane and elegant way to do this!

Answer 2

Old thread but if anyone runs into this I was able to get it working by assigning global in polyfills.ts. Then you can use it just like the event-drops instructions describe for a Module Bundler:

(window as any).global = window;