GoJs分組繪圖模板go.Group使用示例詳解

Posted on by

前言

在可視化圖形中，很多的節點和連線都有某一個特征或者屬於某些分類，為瞭在使用可視化圖形的時候更加直觀的看出相同類型節點的集合，我們就會用到分組的繪圖模板。

Group的使用

//data
nodes: [
    {
      key: "1",
      text: "三國人物志",
      isGroup: true
    },
    {
      key: "1-1",
      text: "魏",
      group: "1",
      isGroup: true
    },
    {
      key: "1-1-1",
      text: "曹丕",
      group: "1-1",
    },
    {
      key: "1-2",
      text: "蜀",
      group: "1",
      isGroup: true
    },
    {
      key: "1-2-1",
      text: "劉備",
      group: "1-2",
    },
    {
      key: "1-3",
      text: "吳",
      group: "1",
      isGroup: true
    },
    {
      key: "1-3-1",
      text: "孫權",
      group: "1-3",
    },
  ],
  links: [
  ],
  //methods
  this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
  });
  this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Horizontal",
    $$(go.TextBlock,{background:"#67B73C"},new go.Binding("text", "text")),
  );
  this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

可以看出通過group字段來判斷自己這個節點屬於哪個組，然後用isGroup來判斷該對象是一個組，而不是一個普通節點。這些組成員之間的關系又構成瞭一個樹形結構，這讓我們很方便的分析這些成員之間的關系。

Group的屬性

handlesDragDropForMembers//是否可以監聽子組的拖拽
isSubGraphExpanded//是否顯示組內的其他節點
ungroupable//是否可以解除對應組的的分類
wasSubGraphExpanded//是否可以折疊展開組

handlesDragDropForMembers、isSubGraphExpanded屬性

handlesDragDropForMembers屬性是設置是夠允許組內的節點的拖拽的事件冒泡到組中，如果設置為true。則需要對組內的節點設置mouseDragEnter、mouseDragleave、mouseDrop來分別處理拖拽過程中對應的拖拽事件。這些放到後面事件的方法中詳細解析。

isSubGraphExpanded屬性

isSubGraphExpanded屬性是設置是否顯示組內的其他節點，默認為true，顯示組內的其他節點。可以使用myDiagram上的groupTemplate做一些簡單的配置看一下對應的效果。

this.myDiagram.groupTemplate = $$(
        go.Group,
        "Auto",
        {
          isSubGraphExpanded: false,
        },
        $$(go.Shape, "Rectangle", { fill: null, stroke: "#67B73c" }),
        $$(
          go.Panel,
          "Table",
          $$(
            go.TextBlock,
            {
              row: 0,
              column: 1,
              stroke: "#FF9900",
              textAlign: "center",
              stretch: go.GraphObject.Horizontal,
            },
            new go.Binding("text")
          )
        )
      );

由此可以看出設置isSubGraphExpanded為false會把所有的組進行折疊。

ungroupable、wasSubGraphExpanded屬性

ungroupable屬性是設置是否可以解除對應的組,默認為false。可以根據自己的需求去設置不同的屬性。wasSubGraphExpanded屬性設置是否可以展開和折疊組，我們可以對上面的組進行一些拓展，就是下面這個樣子

this.myDiagram.groupTemplate = $$(
    go.Group,
    "Auto",
    {
      wasSubGraphExpanded:true,
    },
    $$(go.Shape, "Rectangle", { fill: null, stroke: "#67B73c" }),
    $$(
      go.Panel,
      "Table",
      $$("SubGraphExpanderButton", { row: 0, column: 0, margin: 3 }),
      $$(
        go.TextBlock,
        {
          row: 0,
          column: 1,
          stroke: "#FF9900",
          textAlign: "center",
          stretch: go.GraphObject.Horizontal,
        },
        new go.Binding("text")
      ),
      $$(
        go.Placeholder,
        { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
        new go.Binding("padding", "isSubGraphExpanded", function (exp) {
          return exp ? 10 : 0;
        })
      )
    )
  );

然後圖形就變成瞭這樣，通過SubGraphExpanderButton按鈕可以控制不同的組的折疊和顯示。

結語

在真正的開發過程中，一般遇到這種分組的情況比較少，但是gojs還是提供瞭組的繪圖模板供我們使用。也是拓展瞭很多可視化圖形的顯示空間

以上就是GoJs分組繪圖模板go.Group使用示例詳解的詳細內容，更多關於GoJs分組繪圖模板Group的資料請關註WalkonNet其它相關文章！

推薦閱讀：