Question

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

我试图创建一个无效（超出我目前的技能组合）并且我试图直接将其作为普通JS脚本包含使用 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时，我都必须再次解决这个问题......

如何使用Angular 2和Typescript

1 个答案: