如何在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类的元素时，切换按钮是不是在简单状态（它们藏在简单的状态）仅显示。请注意，classList.toggle（）不是完全交叉浏览器，但是您可以找到一个交叉浏览器，因为我只是提供思路。