How do I get the browser's “back” button to to clear the previous state of a d3.js visualization?

Question

I'm using D3 to develop a "Radial Hub and Spoke Chart" (a.k.a. a "Radial Wheel") from pie layouts and arcs. I've set the wheel up to enable all arcs and nodes with HTML links that all work fine. I've also set the wheel to use mouseover events to change colors of arcs and nodes.

The problem is that when I mouseover an element and click on it to go to the HTML page it leads to, hitting the browser's "back" button to get back to the D3 visualization does not clear the mouseover's last state. More specifically, if I mouse over an arc, the .on(mouseover...) event calls a function to turn the arc dark blue. I then click on the arc to go to the page it's linked to. When I hit the browser's "back" button to go back to the visualization, the arc is still dark blue, rather than returning to it's original color.

Is there a simple and clean way to address this?

Answer 1

Have you considered resetting the styling in the .on(click)? This is probably easiest if you're using CSS classes to change the color to begin with. Nice chart, btw.

Update: I have not been able to reproduce this behavior using the provided link in Chrome, Firefox, or Safari. It always returns to the original color on browser-back.