Hiding elements in a diagram

Question

I have a read-only diagram to visualize some data. My end users would like to "filter" the data such that only a subset of the data may be shown at one time. I realize that I can redraw the whole diagram each time I apply a filter omitting the elements that are not to be shown but I am wondering if there is a way that I can simply "hide" some existing elements dynamically and then subsequently re-show them.

To try and make crystal clear, if this were a web page instead of a diagram, I would draw the analogy of applying the CSS of display: none to elements of my choosing.

Answer 1

You can actually do the same with a JointJS diagram elements/links. For example:

myElement.attr('./display', 'none')

hides the whole SVG group element in which the element is rendered. Note the '.' is a special selector that points to the whole group. If you want to hide only a certain SVG subelement, you can do it similarly, e.g. for the joint.shapes.basic.Rect element, you'd do:

myRect.attr('rect/display', 'none')

This hides only the rectangle (the SVG <rect> element referenced by the tag name rect in the attrs object - that we modify via the attr() method.