欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年05月05日 10:29:50   作者:沅芷湘蘭  
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

在可視化圖形中,很多的節(jié)點(diǎn)和連線都有某一個(gè)特征或者屬于某些分類,為了在使用可視化圖形的時(shí)候更加直觀的看出相同類型節(jié)點(diǎn)的集合,我們就會(huì)用到分組的繪圖模板。

Group的使用

//data
nodes: [
    {
      key: "1",
      text: "三國(guó)人物志",
      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: "孫權(quán)",
      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字段來(lái)判斷自己這個(gè)節(jié)點(diǎn)屬于哪個(gè)組,然后用isGroup來(lái)判斷該對(duì)象是一個(gè)組,而不是一個(gè)普通節(jié)點(diǎn)。這些組成員之間的關(guān)系又構(gòu)成了一個(gè)樹形結(jié)構(gòu),這讓我們很方便的分析這些成員之間的關(guān)系。

Group的屬性

handlesDragDropForMembers//是否可以監(jiān)聽子組的拖拽
isSubGraphExpanded//是否顯示組內(nèi)的其他節(jié)點(diǎn)
ungroupable//是否可以解除對(duì)應(yīng)組的的分類
wasSubGraphExpanded//是否可以折疊展開組

handlesDragDropForMembers、isSubGraphExpanded屬性

handlesDragDropForMembers屬性是設(shè)置是夠允許組內(nèi)的節(jié)點(diǎn)的拖拽的事件冒泡到組中,如果設(shè)置為true。則需要對(duì)組內(nèi)的節(jié)點(diǎn)設(shè)置mouseDragEnter、mouseDragleave、mouseDrop來(lái)分別處理拖拽過程中對(duì)應(yīng)的拖拽事件。這些放到后面事件的方法中詳細(xì)解析。

isSubGraphExpanded屬性

isSubGraphExpanded屬性是設(shè)置是否顯示組內(nèi)的其他節(jié)點(diǎn),默認(rèn)為true,顯示組內(nèi)的其他節(jié)點(diǎn)??梢允褂胢yDiagram上的groupTemplate做一些簡(jiǎn)單的配置看一下對(duì)應(yīng)的效果。

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")
          )
        )
      );

由此可以看出設(shè)置isSubGraphExpanded為false會(huì)把所有的組進(jìn)行折疊。

ungroupable、wasSubGraphExpanded屬性

ungroupable屬性是設(shè)置是否可以解除對(duì)應(yīng)的組,默認(rèn)為false??梢愿鶕?jù)自己的需求去設(shè)置不同的屬性。wasSubGraphExpanded屬性設(shè)置是否可以展開和折疊組,我們可以對(duì)上面的組進(jìn)行一些拓展,就是下面這個(gè)樣子

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按鈕可以控制不同的組的折疊和顯示。

結(jié)語(yǔ)

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

以上就是GoJs分組繪圖模板go.Group使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于GoJs分組繪圖模板Group的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • js實(shí)現(xiàn)仿愛微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼

    js實(shí)現(xiàn)仿愛微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼

    這篇文章主要介紹了js實(shí)現(xiàn)仿愛微網(wǎng)兩級(jí)導(dǎo)航菜單效果代碼,通過javascript自定義函數(shù)結(jié)合鼠標(biāo)點(diǎn)擊事件實(shí)現(xiàn)tab切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • uni-app瀑布流效果實(shí)現(xiàn)方法

    uni-app瀑布流效果實(shí)現(xiàn)方法

    Uni-app是一個(gè)基于Vue.js開發(fā)跨平臺(tái)應(yīng)用的框架,它可以將代碼編譯成多個(gè)平臺(tái)下的原生應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app瀑布流效果的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • JS中異常拋出和處理方法圖文詳解

    JS中異常拋出和處理方法圖文詳解

    JavaScript和其他語(yǔ)言一樣,都擁有捕獲異常的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS中異常拋出和處理的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-11-11
  • HTML頁(yè)面,測(cè)試JS對(duì)C函數(shù)的調(diào)用簡(jiǎn)單實(shí)例

    HTML頁(yè)面,測(cè)試JS對(duì)C函數(shù)的調(diào)用簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇HTML頁(yè)面,測(cè)試JS對(duì)C函數(shù)的調(diào)用簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2016-08-08
  • TypeScript條件類型與內(nèi)置條件類型超詳細(xì)講解

    TypeScript條件類型與內(nèi)置條件類型超詳細(xì)講解

    我們可以使用TypeScript中的條件類型來(lái)根據(jù)邏輯定義某些類型,就像是在編寫代碼那樣。它采用的語(yǔ)法和我們?cè)贘avaScript中熟悉的三元運(yùn)算符很像:condition ? ifConditionTrue : ifConditionFalse。我們來(lái)看看他是怎么工作的
    2023-03-03
  • JavaScript代碼生成PDF文件的方法

    JavaScript代碼生成PDF文件的方法

    如何使用js生成pdf文件呢,下面通過本文給大家分享JavaScript代碼生成PDF文件的方法,需要的朋友參考下吧
    2016-02-02
  • 有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析

    有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析

    這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
    2020-05-05
  • 輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果

    輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果

    這篇文章主要幫助大家輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • JS加密插件CryptoJS實(shí)現(xiàn)的DES加密示例

    JS加密插件CryptoJS實(shí)現(xiàn)的DES加密示例

    這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的DES加密,結(jié)合實(shí)例形式分析了javascript使用CryptoJS插件進(jìn)行des加密的各種常見模式使用技巧,需要的朋友可以參考下
    2018-08-08
  • 微信小程序 wepy框架與iview-weapp的用法詳解

    微信小程序 wepy框架與iview-weapp的用法詳解

    這篇文章主要介紹了微信小程序 wepy框架與iview-weapp的用法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04

最新評(píng)論