d3.drag（）in Angular2

Question

Angular2コンポーネントでd3.drag（）を使用する方法がまだ見つかりません。

しよう：

d3.selectAll(".node").call(d3.drag().on("start", started)); 

をしかし取得 "未解決の関数やメソッドドラッグを（）"。

私はd3をインストールしました。これはかなりうまく動作しています。私は 'd3'からd3としてimport *を使ってd3をインポートしました。ここに私のコードの例は次のとおりです。

import {Component, OnInit} from '@angular/core'; 
import * as d3 from 'd3'; 
// some other imports 

@Component({ 
    selector: 'model-detail-d3', 
    inputs: ['modelData'], 
    templateUrl: 'app/shared/templates/d3.html', 
    //styleUrls: ['app/replication-model/d3.css'] 
    providers: [DataModel] 
}) 
export class ModelDetailD3Component implements OnInit { 

    private modelData : ModelData; 

    constructor(private someModel: SomeModel) { 
     this.someModel= someModel; 
    } 

    ngOnInit() { 

     this.someModel.setInstanceData(this.modelData); 

     var someItems: someItems[]; 
     someItems = []; 
     if (this.someModel.getInstances()) someInstances = this.someModel.getInstances(); 

     // d3 container 
     var svgContainer = d3.select("#d3-model") 
      .append("svg") 
      .attr("width", 600) 
      .attr("height", 300); 

     var d3Items = svgContainer.selectAll("rect") 
      .data(someInstances) 
      .enter() 
      .append("rect"); 


     var defaultX = 10; 
     var defaultY = 10; 
     var spiAttributes = spiItems 
      .attr("x", function (spiItem, i) { return 10 + (someItem.d3.x || 10*i*defaultX); }) 
      .attr("y", function (spiItem, i) { return 10 + (someItem.d3.y || 10*i*defaultY); }) 
      .attr("height", function (someItem) { return (50); }) 
      .attr("width", function (someItem) { return (80); }) 
      .style("fill", function(someItem) { return "red"; }) 
      // Add event to each item 
      .on('mouseover', (someItem) => { 
       this.onMouseOn(someItem); 
      }) 
      .on('mouseout', (someItem) => { 
       this.onMouseOut(); 
      }) 
      .append('rect'); 

     // HERE IS THE PROBLEM: "Unresolved function or method drag()" 
     svgContainer 
      .call(d3.drag() 
       .container(svgContainer) 
       .on("start", dragstarted) 
       .on("drag", dragged) 
       .on("end", dragended)); 

     // d3.selectAll("rect").call(d3.drag().on("start", started)); 
    }; 

だから私はいくつかのデータによると、いくつかの項目を描画するためにAngular2にD3を使用することができますが、私はそれが動作している場合でも、ドラッグやズームなど、いくつかの行動をすることはできませんよいくつかのjsの例では、ここではhttp://bl.ocks.org/enjalot/1378144またはhttps://bl.ocks.org/mbostock/6123708ですが、Angular2ではありません。あなたがd3-dragパッケージをインストールする必要があります（d3.dragを使用するためには

Answer 1

だから私はバージョン4とAngular2にD3の機能ドラッグ（）を使用する方法を発見していませんD3のバージョン3ではうまくいきます。

Answer 2

）：

npm install d3-drag 

Answer 3

コンポーネントにd3-dragを使用する方法の例については、drag-zoom-2 Angular component exampleをご覧ください。

• これはおそらく、独自のカスタマイズ
• が
• 、あなたはd3-dragイベント処理のために必要なコールバックを作成することができ、d3へのアクセスを得るためにサービスを使用します。例はd3-ng2-serviceを使用していますが、それはあなたの基本的なアイデアを与える必要がありますイベントハンドラを適切な角度のライフサイクルフックに取り付けます。重要な検討事項として

、設計により、d3-dragコールバックのthis範囲は選択された要素ではなく、あなたの角度成分のthis範囲である、ということに注意してください！したがって、コールバックでAngularコンポーネントのメンバーにアクセスする必要がある場合は、Angularコンポーネントへのアクセスを提供するクロージャから返されたドラッグイベントハンドラを使用します。コードスニペットは、ここで「ドラッグ＆ズーム-2」での実装の詳細に代わるものであることを

private getDragHandler() { 
    const self = this; 
    return function dragged(this: SVGCircleElement, d: PhyllotaxisPoint) { 
    let e: D3DragEvent<SVGCircleElement, PhyllotaxisPoint, PhyllotaxisPoint> = d3.event; 

    // Use self.foo to access the foo member of the Angular component. 

    d3.select(this).attr('cx', d.x = e.x).attr('cy', d.y = e.y); 
    } 
} 

注：

は、これは同様に、民間の角度成分のメソッドを追加することを意味する可能性があります。

Answer 4

D3はtypescriptに実装されていないためです。厳密なタイピングに従います.d3.drag（）を（<任意の> d3）.drag（）に型キャストする必要があります。

うまくいきます。