zoom is been fired when drag event ends

[jycaraujo]

Hi everyone, There is an annoying bug happening when I try to drag a node in a force layout. The graph is getting attached with the selector. I noticed that the zoom event is being called at the end of drag event and it's applying a transform in the whole force layout until the next click outside the node. I'm doing something like this to set drag and zoom events:

// Sets drag listeners this.drag_handler = d3.drag() .on('start', (d) => this.dragstarted(d)) .on('end', null) .on('drag', (d) => this.dragged(d));

// Set zoom handler this.zoom_handler = d3.zoom() .scaleExtent([1/4, 10]) .on('zoom', () => this.zoom_actions()); this.zoom_handler(this.svg);

//...

private zoom_actions = () => { this.g.attr('transform', d3.event.transform); }

Does anyone know how to avoid the zoom handler being called?

[jo-wil]

@jycaraujo are you by any chance using Angular? I am running into the same issue as you described while using Angular but if I write a POC in vanilla js this works as expected.

[mbostock]

Closing to inactivity.

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗