Interaction between SVG and Canvas

Hi I am Xianlin Hu, a front-end visualization engineer from Illumio. This article is about one problem we met in our recent project, which I really want to write it down and discuss with people who are interested and have similar experience.

Recently I am working on a visualization project, which is to use parallel coordinates to visualize network traffic data. Our traffic dataset is large, so I tried to use canvas to draw links but keep axises with SVG for easier interaction(Example here). The rendering performance improved a lot but the problem of interaction between SVG and Canvas shows up.

We created a hidden Canvas layer and we are trying to make links clickable on Canvas in our parallel coordinates. However, the click event for Canvas can’t be triggered because the axises SVG layer is on top of Canvas layers. But we can’t just switch Canvas layers and SVG layer because the axises are clickable as well.

One simple solution is just using Canvas for everything. But before that, I want to figure out any possible good solutions. I also want to know the best interaction methods between SVG and Canvas. I googled and didn’t find good answers. Then I come up with one solution. I am thinking maybe I can use z-index to control the depth of my layers. So the solution is:

On SVG component:

clicking on any axises will make SVG.z-index = 1, Canvas.z-index = -1;

clicking on non-axises will make SVG.z-index = -1, Canvas.z-index = 1;

On Canvas component put the same logic.

So when SVG is on top of Canvas, clicking non-axises area will make Canvas on top, and the same logic on Canvas will still be followed.

Even thought this works on my project, but still this is just one way that I come up with by myself. I am very open to listen to any suggestions, comments, and ideas that related with this topic. If you have any ideas, please leave a comment. I will appreciate your help very much.