[英]D3 zoom event firing on drag in Angular
Tldr; Tldr; dragging the SVG causes it to rotate as well as translate.
拖动SVG会导致它旋转和翻译。
I am trying to implement dragging and zooming events on an SVG group using D3 (v.4) as part of an Angular service. 我正在尝试使用D3(v.4)作为Angular服务的一部分在SVG组上实现拖动和缩放事件。
this.unitGroup = this.svg.append('g')
.attr('id', 'unitGroup')
.call(this.drag)
.call(this.zoom);
Dragging translates the SVG. 拖动转换SVG。
drag = d3.drag()
.on('start', () => {
console.log('drag start');
this.setClickOrigin(d3.event);
})
.on('drag', (d, i, n) => {
const target = d3.select(n[i]).node() as any;
const m = target.getCTM();
const x = d3.event.x - this.clickOrigin.x;
const y = d3.event.y - this.clickOrigin.y;
this.setClickOrigin(d3.event);
this.translate(target, x, y);
});
While zooming rotates the SVG. 当缩放旋转SVG时。
zoom = d3.zoom()
.on('zoom', (d, i, n) => {
const target = d3.select(n[i]).node() as any;
const m = target.getCTM();
const b = target.getBBox();
const dir = (d3.event.sourceEvent.deltaY > 0) ? 1 : -1;
this.rotate(target, dir);
});
My original code worked fine. 我的原始代码运行正常。 However, integrating it into Angular has thrown up some problems.
但是,将它集成到Angular中会引发一些问题。
The current problem is that when you drag the unitGroup
it triggers the zoom
event along with the drag
event. 当前的问题是,当您拖动
unitGroup
它会触发zoom
事件以及drag
事件。
The expected behaviour is that: 预期的行为是:
Here is a Plunker: https://embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/ 这是一个Plunker: https ://embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/
Actually, what you are seeing here is the expected behaviour. 实际上,你在这里看到的是预期的行为。
In D3, d3.zoom()
handles not only the zoom but the panning as well. 在D3中,
d3.zoom()
不仅处理缩放,还处理平移。 So, the mousemove is being handled by d3.drag()
and by the zoom function as well. 因此,
d3.drag()
由d3.drag()
和缩放功能处理。
As Bostock (D3 creator) once said: 正如Bostock(D3创造者)曾经说过:
combining these two behaviors* means that gesture interpretation is ambiguous and highly sensitive to position.
结合这两种行为*意味着手势解释模糊不清,对位置高度敏感。 (*zoom and drag)
(*缩放和拖动)
Off the top of my head the simplest solution is just checking if you had a "real" zoom (mouse wheel) in the zoom function and, if you didn't (no mouse wheel), return: 在我的脑海中,最简单的解决方案就是检查缩放功能中是否有“真正的”缩放(鼠标滚轮),如果没有(没有鼠标滚轮),则返回:
if(!d3.event.sourceEvent.deltaY) return;
Here is your plunker with that change only: https://plnkr.co/edit/jz5X4Vm9wIzbKmTQLBAT?p=preview 以下是您的更新内容: https ://plnkr.co/edit/jz5X4Vm9wIzbKmTQLBAT?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.