问题
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.
回答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.
来源:https://stackoverflow.com/questions/27114905/hiding-elements-in-a-diagram