如何使用 Angular 2 和 Typescript 实现 D3 套索插件

Question

我正在尝试使用Typescript在Angular 2项目中使用Speros Kokenes(https://github.com/skokenes/D3-Lasso-Plugin)创建的套索插件。 我的项目中有 D3 v4 工作正常，但是当我尝试添加套索插件时，我遇到了问题，因为它没有 .d.ts 文件。

我试图创建一个无济于事(超出我当前的技能)，我试图使用declare var Lasso: any;语法。 有没有人有使用 Angular2 实现 D3 插件的示例？

提前谢谢。

编辑：我已经更接近了一点，能够将插件包含在项目中并且正在执行代码。 但是，该插件引用的是 D3.js 核心功能。 不幸的是，调用插件时 d3 对象未定义，我的假设是它需要引用 global.d3 引用，但我还没有找到访问它的方法。 我回去查看了其他 d3 插件以获取如何引用它的线索，但看起来这是唯一的一个。

Answer 1

我正在研究同样的问题。我想出了几个解决方案。

选项 1

在类中创建一个全局变量。

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

选项 2

只需破解 d3-lasso.js 代码即可接收 d3 对象。

function lasso(d3) {...}

然后在您的 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"));
}

话虽如此，我正在研究另一种解决方案，因为每次我们调用 npm install 时，我都必须再次修复此问题......