Search code examples
javascriptangularjsinfovisthejitspace-tree

How to Remove Previously Drawn InfoVis Space Tree


I am using InfoVis to generate a space tree visualization in one of my projects. Since this is an interactive web site, the Space Tree needs to be regenerated each and every time the user has changed preferences.
This requires the Space Tree to be completely cleared and re-draw a new tree on the same space. In addition, the charting area can be re sized as the page size varies. This requires re-draw of the Space Tree.

I came across several issues while trying to clear the previously drawn Space Tree before drawing the new one. I am using the following code segment to clear the previous drawing, but it's failing miserably.

st.clearNodesInPath();
st.labels.clearLabels(true);
st.canvas.clear();

If anyone can guide me how to resolve this that would be great as this is blocking my progress. Thanks in advance.

enter image description here


Solution

  • This was resolved in the following manner.

    The InfoVis chart draws it's elements as HTML div elements inside the parent element. The problem was due to remainings of those generated div elements even after clearing up the data structures. Those were clearly shown in the previously attached images.

    This was resolved in the following manner.

    var list = document.getElementById("idOfParentElement");
    list.removeChild(list.childNodes[0]);
    

    The code fragment extracts the parent InfoVis element and clears up all of it's generated child elements. This will eventually clears the canvas object where the visualization will be drawn.

    This resolved my issue. Hope this helps for anyone who is having the same issue.