如何在Graphiti中创建可折叠的图形？

Question

该图由多个图组成(全部为SVGFigure)。我想要父图形有一个按钮来改变它的状态，以便它被简化(隐藏大多数子图形和连接线)

实现这一目标的最好方法是什么？

Answer 1

我不能100%确定这是否是你要找的东西，但在我对这个问题的解释中：

我认为您可以向不应该在某种状态下显示的图形添加类名。例如，使用这个伪HTML：

<input id="toggleButton" type="button">Toggle</input>
<svg>
    <shape1 class="complexOnly">
    <shape2 class="complexOnly">
    <shape3>
</svg>

并使用以下JavaScript，为按钮附加一个事件侦听器以切换状态：

document.getElementById( "toggleButton" ).addEventListener("click", toggleSVGstate, false );
function toggleSVGstate() {
    this.classList.toggle( "simpleState" );
}

而对于CSS，这只适用于特定的状态：

#toggleButton.simpleState>.complexOnly {
    display: none; /* Or visibility: hidden */
}

这意味着带有complexOnly类的元素仅在toggleButton不处于简单状态时显示(它们隐藏在简单状态中)。请注意，classList.toggle()并不是完全跨浏览器的，但您可以找到一个跨浏览器的方法，因为我只是提供了去/思考的方法。