树状分支图的html如何编写,流程图控件GoJS教程：树状图的分支设置

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

SubTrees

树形图可能会变得非常大。简化图的一种方法是隐藏树的分支。“折叠”树节点意味着不显示其所有子节点及其链接，并递归折叠所有具有子节点的子节点。

要折叠树中的节点，请将Node.isTreeExpanded设置为false。为了确保它被扩展，将该属性设置为true。您不应在不是GraphObject.visible的Node上将此属性设置为true 。

通常，在节点上提供一个按钮以允许用户根据需要折叠和展开子树。 GoJS通过提供一种预定义的面板，称为“ TreeExpanderButton”，使该面板易于实现，该面板用作折叠和展开节点子树的按钮。此按钮更改子树除节点本身以外的所有部分的可见性。

单击扩展器按钮也会使对节点负责的布局无效。折叠子树通常会导致较大的空白区域，而展开子树通常会导致节点重叠，因此应再次执行新的布局以使树看起来更好。diagram.nodeTemplate =

$(go.Node, "Horizontal",

$(go.Panel, "Auto",

$(go.Shape, "Ellipse", { fill: null }),

$(go.TextBlock,

new go.Binding("text", "key"))

),

$("TreeExpanderButton")

);

diagram.layout = $(go.TreeLayout);