Angular 2とTypescriptを使用してD3 lassoプラグインを実装する方法

Question

Speros Kokenes（https://github.com/skokenes/D3-Lasso-Plugin）が作成したlassoプラグインを、Typescriptを使用してAngular 2プロジェクトで使用しようとしています。私は私のプロジェクトでうまく動作しているD3 v4を持っていますが、lassoプラグインを追加しようとすると.dtsファイルがないので問題が発生します。

私の現在のスキルセットを超えて1つを作成しようとしましたが、 declare var Lasso: any;シンタックスを使用してプレーンなJSスクリプトとして直接取り込もうとしました。 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オブジェクトに取るD3-lasso.jsコードをハックすることが可能です。その後、

function lasso(d3) {...} 

、我々がインストールNPM呼び出すたびに、私は再びこの問題を解決する必要がありますので、言われて、私は別の解決策に取り組んでいること

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

を提出あなたのTSでそれを呼び出します...