角度2 D3ドラッグ機能のスコープの問題私はd3.jsのV4.4と2</p> <p>角度を使用しています

Question

私はドラッグ＆切妻とドラッグが正常に動作のいくつかのバブルを持っています。 drag-to xとyにアクセスする場合、私は今何をする必要があるのですか？それらの値を使用して、自分のコンポーネント上にあるデータセットで値を計算します。私が遭遇した問題はドラッグエンド機能です。これはドラッグされたオブジェクトを指しています。実際の親スコープにアクセスできるようになりました。

これはバブルを追加した方法です。

showPeopleBubble() { 
     let self = this; 
     console.log('run') 
     this.bubblePeople = this.canvas.selectAll('.bubblePeople') 
      .data(this.nodes) 
      .enter().append('g') 
      .attr('class','.bubblePeople').attr('id',function(d){return 'i'+d.index}) 
      .attr('transform',"translate(100,100)") 
      .call(D3['drag']().on("start", self.dragstarted) 
       .on("drag", self.dragged) 
       .on("end", self.dragended)); 

      this.bubblePeople.append("title").text(function(d){return d.name + ' ('+d.index+')'}) 

      this.bubblePeople.append('circle') 
       .attr('r',30) 
       .attr('fill','blue') 
       .attr('fill-opacity',.3) 
       .attr("text-anchor","middle") 

      this.bubblePeople.append('text').text(function(d){return d.name.substring(0,30/3)}); 

    } 

dragended(d) { 
    // this in here is the bubble that i'm dragging 
//i need to access the parent level. 


} 

Answer 1

は手動で次のようにコールバックを使用することができます。

showPeopleBubble() { 
     let self = this; 
     console.log('run') 
     this.bubblePeople = this.canvas.selectAll('.bubblePeople') 
      .data(this.nodes) 
      .enter().append('g') 
      .attr('class','.bubblePeople').attr('id',function(d){return 'i'+d.index}) 
      .attr('transform',"translate(100,100)") 
      .call(D3['drag']().on("start", self.dragstarted) 
       .on("drag", self.dragged) 
       .on("end", function(d){ 
        return self.dragended(d, this, self); 
       })); 

      this.bubblePeople.append("title").text(function(d){return d.name + ' ('+d.index+')'}) 

      this.bubblePeople.append('circle') 
       .attr('r',30) 
       .attr('fill','blue') 
       .attr('fill-opacity',.3) 
       .attr("text-anchor","middle") 

      this.bubblePeople.append('text').text(function(d){return d.name.substring(0,30/3)}); 

    } 

dragended(d, innerThis, globalThis) { 
    // this in here is the bubble that i'm dragging 
//i need to access the parent level. 
    // globalThis.someFunction(); <-- will call the global someFunction() method 

} 

someFunction(){} 

私もそう、あなたがグローバルスコープでdragended(d)関数の中にそれを失うことはありません機能にthisを入れています。

Answer 2

.bindを使用して終了します。これは必要なデータまたはデータをバインドできます。

.call(D3['drag']().on("start", self.dragstarted) 
       .on("drag", self.dragged) 
       .on("end", self.dragended.bind(this)));