Search code examples
javascripthtmlcanvasdata-visualizationinfovis

Hide HTML outside of canvas element in the JavaScript tool InfoVis


I'm currently creating a visualization of some objects on my project and I'm using the InfoVis toolkit to handle the graph visualization part. So far I have the nodes plotted correctly and relating to each other correctly, but there is a graphical error that is bothering me. When a node is partly off of the canvas, the background of the node is hidden (as it should be) because it is a canvas element itself. However, the contents (which are HTML) are shown completely and they hang off of the canvas element.

You can see the visualization here: Link

Drag around the graph until one of the nodes is partly off the screen and you'll see it. It is more obvious on the right/bottom sides.

Here is a picture of the problem: The black border is the canvas border.

How can I stop this from happening?

The black border is the canvas border


Solution

  • Try setting overflow: hidden on the div with the ID infovis-canvaswidget. It looks like the Canvas element is injected into it.

    enter image description here