TL; DR; dragging an SVG makes it rotate as well as translate.
I am trying to implement drag and drop events in an SVG group using D3 (v.4) as part of the Angular service.
this.unitGroup = this.svg.append('g')
.attr('id', 'unitGroup')
.call(this.drag)
.call(this.zoom);
Drag and Drop translates 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);
});
When scaling, the SVG rotates.
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, there were some problems.
The current problem is that when you drag unitGroupit, it fires the event zoomalong with the event drag.
Expected Behavior:
- "click-and-drag" converts a small, dark gray square into x and y.
- The mouse-wheel-scroll rotates a small, dark gray square around its center.
: https://embed.plnkr.co/0GrGG7T79ubpjYa2ChYp/