Javascript 角度2 D3拖动功能范围问题

我使用的是d3.js v4.4和Angular 2

我有一些泡泡，是拖曳山墙，拖曳效果很好。如果访问拖动到x和y，我现在需要做的是，使用这些值计算位于组件上的数据集的值。我遇到的问题是我的drag end函数，它指的是被拖动的对象，我无法访问实际的父范围

这就是我添加气泡的方式

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.


}

---

您可以像这样手动使用回调：

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(){}

showPeopleBubble（）{
让自我=这个；
console.log（'run'）
this.bubblePeople=this.canvas.selectAll（“.bubblePeople”）
.data（此.nodes）
.enter（）.append（'g'）
.attr（'class'，'bubblePeople'）.attr（'id'，函数（d）{return'i'+d.index}）
.attr（'transform'，“translate（100100）”）
.call（D3['drag']（）.on（“开始”，self.dragstarted）
.on（“拖动”，自拖动）
.开启（“结束”，功能（d）{
返回self.dragended（d，this，self）；
}));
this.bubblePeople.append（“title”）.text（函数（d）{return d.name+'（'+d.index+'）'）}）
this.bubblePeople.append（'circle'））
.attr（'r'，30）
.attr（'fill'，'blue'）
.attr（'fill-opacity'，.3）
.attr（“文本锚定”、“中间”）
this.bubblePeople.append（'text'）.text（函数（d）{返回d.name.substring（0,30/3）}）；
}
dragended（d、innerThis、globalThis）{
//这是我正在拖的泡沫
//我需要访问父级。
//globalThis.someFunction（）；最终使用.bind，我可以绑定这个或我需要的数据

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

谢谢，没有尝试过这个，我最终使用了.bind（这个）@chungtinhlakho没问题，请注意，如果您将全局this绑定到方法，您将丢失事件
this
。这可能与此问题无关，但它将与
鼠标单击
之类的事件相关。只是想让您知道。很高兴知道，谢谢，我尝试了您的方法，效果非常好，并提供了更多灵活性。谢谢。