前言

前面的文章中提到了提示信息(toolTip)在節(jié)點(diǎn)信息內(nèi)容過多的時(shí)候，需要節(jié)點(diǎn)信息的內(nèi)容進(jìn)行隱藏，在鼠標(biāo)移入的時(shí)候進(jìn)行未顯示信息的提示框形式的選中，本文講從另外的角度處理在畫布上的可視化圖形的內(nèi)容過多的時(shí)候的處理情況，一種是把節(jié)點(diǎn)的內(nèi)部的折疊和展開，另外一種就是對(duì)部分節(jié)點(diǎn)進(jìn)行折疊和展開。

節(jié)點(diǎn)折疊展開的不同情況

對(duì)于節(jié)點(diǎn)的折疊展開分幾種情況。第一種是對(duì)于樹形布局的特有屬性可以對(duì)樹形布局后代的節(jié)點(diǎn)進(jìn)行一個(gè)折疊展開，第二種是前面文章提到的go.Group(組)和go.Panel(面板)內(nèi)部的內(nèi)容也就是節(jié)點(diǎn)內(nèi)部信息的折疊和展開。

樹形布局特有的屬性后代節(jié)點(diǎn)的折疊展開

this.myDiagram.nodeTemplate =
$$(go.Node, "Spot",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",
            { width: 30, height: 30},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.TextBlock, 
            new go.Binding("text", "text")),
    ),
    $$("TreeExpanderButton",
    { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
    )
);

因?yàn)閷傩圆季值奶厥庑裕忻鞔_的父子關(guān)系。因此gojs內(nèi)部給內(nèi)置了名字為TreeExpanderButton的樹圖折疊展開按鈕，在使用的時(shí)候只需要根據(jù)自己的腦圖朝向把圖形折疊展開按鈕的按鈕根據(jù)Spot(點(diǎn)布局)給放置到和后代節(jié)點(diǎn)解除的位置就可以了。默認(rèn)可以實(shí)現(xiàn)樹形結(jié)構(gòu)的折疊展開。

go.Group(組)的內(nèi)部元素的展開折疊

前文中提到，可以給節(jié)點(diǎn)中的屬性isGroup設(shè)置true。將此節(jié)點(diǎn)設(shè)置為組的父級(jí)顯示內(nèi)容。然后通過其他節(jié)點(diǎn)內(nèi)部的屬性group為組的父級(jí)節(jié)點(diǎn)的key值，來渲染組的上下級(jí)關(guān)系。代碼示例如下

this.myDiagram.groupTemplate  =
$$(go.Group, "Horizontal",
    $$(go.Panel, "Auto",
        $$(go.Shape, "Circle",{width:200,height:200},
            new go.Binding("fill", "color"),
            new go.Binding("figure", "figure"),
        ),
        $$(go.Panel,"Horizontal",
            $$("SubGraphExpanderButton",{ margin: new go.Margin(0, 3, 5, 0)}),
            $$(go.TextBlock, 
                new go.Binding("text", "text")),
        ),
    ),
);
this.myDiagram.nodeTemplate  =
$$(go.Node, "Auto",
    $$(go.Shape, "Circle",{width:50,height:50},
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
    ),
    $$(go.TextBlock, 
        new go.Binding("text", "text")),
);

組布局有自己的布局模板為groupTemplate，可以根據(jù)組布局模板對(duì)組的整體樣式進(jìn)行調(diào)整。當(dāng)然在組內(nèi)的其他節(jié)點(diǎn)仍然可以通過nodeTemplate來設(shè)置自己的樣式。組的展開折疊的屬性是SubGraphExpanderButton，可以把組的展開折疊按鈕作為一個(gè)普通的繪圖節(jié)點(diǎn)調(diào)整想要現(xiàn)實(shí)的額位置，其功能為gojs內(nèi)置，可以直接使用其功能。

go.Panel(面板)的內(nèi)部元素的展開折疊

在節(jié)點(diǎn)圖形的模板配置中，如果我們想調(diào)整其他的繪圖模板的位置，需要兩個(gè)繪圖模板當(dāng)成一個(gè)整體進(jìn)行布局展示，例如go.Shape(幾何圖形)和go.TextBlock(文本信息)在節(jié)點(diǎn)內(nèi)相對(duì)位置不變的需求下，是不能直接把go.TextBlock(文本信息)放到go.Shape(幾何圖形)內(nèi)部的，如果想要兩個(gè)位置相對(duì)綁定，就需要把兩個(gè)繪圖模板放到同一個(gè)go.Panel(面板之下)。因此對(duì)于面板內(nèi)的元素也可以實(shí)現(xiàn)一個(gè)展開折疊。

//data
nodes: [
    {
      key: 1,
      text:"三國",
      list1: ["魏", "蜀", "吳"],
    },
],
//methods
this.myDiagram.nodeTemplate = $$(
go.Node,
"Auto",
$$(go.Shape, "Rectangle", { fill: "#67B73C",width:100,height:100 }),
$$(
  go.Panel,
  "Table",
  { column: 0 },
  $$(go.TextBlock, {
    column: 0,
    margin: new go.Margin(3, 3, 0, 3),
    font: "bold 12pt sans-serif",
  },new go.Binding("text", "text")),
  $$("PanelExpanderButton", "LIST1", { column: 1 }),
  $$(
    go.Panel,
    "Vertical",
    { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
    new go.Binding("itemArray", "list1")
  )
)
);

對(duì)于go.Panel(面板)的折疊展開按鈕是通過內(nèi)置的PanelExpanderButton來實(shí)現(xiàn)的，其然后其第二個(gè)參數(shù)為需要折疊的go.Panel的name屬性保持一直，則可以實(shí)現(xiàn)折疊展開。當(dāng)然也可以根據(jù)自己的需求對(duì)其樣式進(jìn)行修改。

總結(jié)

在可視化圖形中。因?yàn)閿?shù)據(jù)量大的時(shí)候?qū)е嘛@示節(jié)點(diǎn)相互折疊導(dǎo)致不完整，往往會(huì)對(duì)節(jié)點(diǎn)內(nèi)顯示的內(nèi)容進(jìn)行隱藏。除了前面文章中提到的toolTip(提示信息)之外，還可以通過本文中的折疊展開按鈕對(duì)內(nèi)容進(jìn)行折疊，以保證瀏覽的重點(diǎn)內(nèi)容的完整顯示。

以上就是詳解GoJs節(jié)點(diǎn)的折疊展開實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于GoJs節(jié)點(diǎn)折疊展開的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論