How to apply pan/zoom to rotated X Axis labels?

[MaheshVelankar]

I am an absolute newbie to D3

I am able to follow and use the recipe of Rotated axis labels in v4 ( https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf ) However; if I apply pan/zoom to such plot, all labels vanish and even ticks do not move with the zoom or pan.

However; if the axis labels are kept without any special formatting of text-anchor and rotation etc, the zoom behavior for the axis works just fine.

Please let me know ( or point me to any example about ) how to use pan / zoom with rotated or formatted x axis labels.

Thanks in advance -Mahesh

[mbostock]

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! 🤗