文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

GoJs分组绘图模板go.Group使用示例详解

2023-05-16 15:07

关注

前言

在可视化图形中,很多的节点和连线都有某一个特征或者属于某些分类,为了在使用可视化图形的时候更加直观的看出相同类型节点的集合,我们就会用到分组的绘图模板。

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的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯