jointjs - 隐藏图表中的元素

Question

我有一个只读图表来可视化一些数据。我的最终用户希望“过滤”数据，以便一次只能显示数据的一个子集。我意识到每次应用过滤器时都可以重新绘制整个图表，忽略不显示的元素，但我想知道是否有一种方法可以简单地动态“隐藏”一些现有元素，然后重新显示他们。

为了弄清楚，如果这是一个网页而不是图表，我会类比将 display: none 的 CSS 应用于我选择的元素。

Answer 1

您实际上可以对 JointJS 图表元素/链接执行相同的操作。例如:

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

隐藏呈现该元素的整个 SVG 组元素。注意 '.'是一个指向整个组的特殊选择器。如果您只想隐藏某个 SVG 子元素，您可以类似地进行操作，例如对于joint.shapes.basic.Rect元素，你会这样做:

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

这只会隐藏矩形(<rect> 对象中标签名称 rect 引用的 SVG attrs 元素 - 我们通过 attr() 方法修改。