我正在使用 d3.js v4.4 和 Angular 2。
我有一些可拖动山墙的气泡,并且拖动效果很好。如果访问拖动到 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.
}
最佳答案
您可以像这样手动使用回调:
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(){}
我还将函数 this
放在了全局范围内的 dragished(d)
函数中,这样您就不会丢失它。
关于javascript - Angular 2 D3 拖动功能范围问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41176647/