d3-zoom: Click event handling breaks easily on Chrome

Hi, I got a weird behaviour on an horizontal tree with zoom: after some fast and random clicks on my tree, where every click expands or collapses a node, I am no more able to do it and the only thing that works is zoom. Disabling zoom fixes the problem, both commenting the call to d3.zoom and using filter on “mousedown”. The problem is that I can’t disable d3.zoom and I can’t filter on mousedown because I’m using it to pan the tree (only to do it, not to zoom).

My example is big and complex but you only have to focus on low number of lines.

How to reproduce

  • Open my example on Chrome
  • Click con nodes randomly and faster as you can for some seconds, until they expand/collapse no more
  • Note that panning is still working (if the tree is larger than your windows, because of the code)

Find the code

The zoom call is in file treeUtils.zoom.js, inside function addController, lines 93-116. The click function is in file script.js, lines 727-750.


The problem occurs more often on Chrome but it is reproducible also on Firefox (at least).

This is my first and big work with d3 but I think everything should works.

Ps: I’ve also read this issue but I have found nothing useful.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 19 (2 by maintainers)

Most upvoted comments

@m1dst yes I have this behavior too. I don’t think you need to restart the PC but just Chrome (all processes). I don’t know how to fix it in code.

I have this problem too: Windows 7/64, Chrome.

I created a forced layout with .on(‘click’) events for every node. Clicks register after 1, 2, or 3 clicks. I tested in Firefox and the events fire on the first click.

I see a similar issue where FF always seems stable, Chrome stays stable for a while and then stops working. Restarting the PC fixes the issue in Chrome. It isn’t clear to me if the issue is within Chrome or D3. What I find when it stops working is ALL click events stop working completely within the D3 container. I can zoom with the scroll wheel but all click events are ignored and don’t hit my breakpoints. Very weird and difficult to repro.

Sorry for my previous message, I have restarted Chrome and now the Plunker example is working like in Firefox.

Actually, I have a collegue with Chrome also but no click problem so it’s a bit weird. I will investigate.