提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:吴园园|2019-12-31 09:48:09.590|阅读 1220 次
概述:使用Group类将Node和Link的集合当作单个Node对待。这些节点和链接是该组的成员。它们共同构成一个子图。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。
组
使用Group类将Node和Link的集合当作单个Node对待。这些节点和链接是该组的成员。它们共同构成一个子图。
子图不是另一个Diagram,因此组的子图没有单独的HTML Div元素。属于组成员的所有Part都与该组属于同一图。成员节点与组外节点之间可以存在链接,组本身与其他节点之间也可以存在链接。成员节点与包含组本身之间甚至可能存在链接。
组也可以折叠和展开,以隐藏或显示成员零件。
可通过Group.memberParts属性获得组的成员部分。相反,如果零件属于一个,则Part。containsGroup属性引用该组。一个零件一次最多可以是一组的成员。您可以设置该属性,以便将该零件添加到组中。但是,您必须确保没有任何组直接或通过其他组间接包含它自己。
因为每个组都是一个Node,所以可以有嵌套的组。尽管节点Node和Link属于包含它们的Group,但是它们不在该组的可视树中-它们的GraphObject.panel为null,并且该组的Panel.elements集合中没有成员部分。任何零件都不能在另一零件的视觉树中。零件通常确实直接属于一个图层。
简单组在GraphLinksModel中,Model.nodeDataArray保存节点数据,每个节点数据可能由Group而不是常规Node表示。您可以通过将isGroup数据属性设置为true来声明它应该是一个组。您可以通过将组的键称为组数据属性值来声明节点数据是组的成员。这是一个包含两个嵌套组以及两个常规节点的组。如果移动组,则其成员部分也会一起移动。如果复制组,则其成员部分也会被复制。如果删除组,则其成员部分也会被删除。如果移动成员节点,则其包含的组会膨胀或收缩以覆盖所有成员占用的区域。
diagram.model.nodeDataArray = [ { key: "Alpha", isGroup: true }, { key: "Beta", group: "Alpha" }, { key: "Gamma", group: "Alpha", isGroup: true }, { key: "Delta", group: "Gamma" }, { key: "Epsilon", group: "Gamma" }, { key: "Zeta", group: "Alpha" }, { key: "Eta", group: "Alpha", isGroup: true}, { key: "Theta", group: "Eta" } ];
组和链接
因为Group是Node,所以Link既可以连接到组也可以连接到普通节点。
这是四个常规节点和一个组节点的简单示例。在此示例中,来自“ Alpha”的链接直接到达“ Beta”节点,但是到“ Delta”的链接实际上来自“ Omega”组,而不是来自该组的任何特定成员。
var nodeDataArray = [ { key: "Alpha" }, { key: "Beta", group: "Omega" }, { key: "Gamma", group: "Omega" }, { key: "Omega", isGroup: true }, { key: "Delta" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, // from outside the Group to inside it { from: "Beta", to: "Gamma" }, // this link is a member of the Group { from: "Omega", to: "Delta" } // from the Group to a Node ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
如果在周围拖动“ Delta”节点,则可以看到“ Omega”组中的链接是如何出现在该组的中心,并开始于该组的边缘而不是任何成员节点。这与从“ Alpha”到“ Beta”的链接不同。
还请注意,从“ Beta”到“ Gamma”的链接如何有效地归“ Omega”组所有,因为两个节点都属于该组。复制组也会自动复制链接。
本示例未设置以下任何属性: Diagram.nodeTemplate,Diagram.groupTemplate和Diagram.linkTemplate,以演示各种节点数据和链接数据的默认模板。
组模板
这是一个示例,说明如何为节点和组定义模板。节点模板非常简单:椭圆中的一些文本。组模板在几个方面与节点模板不同。
首先,组模板将构建go.Group,而不是go.Node或go.Part。该组可以使用多种面板类型,就像节点可以使用各种面板类型一样。
其次,组模板包括一个占位符对象。该对象在一个组的可视树中最多可以包含一个对象,它获取成员零件边界的并集的大小和位置以及一些填充。无论成员节点放置在何处,使用占位符都会使Group围绕组成员的集合。
diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "Ellipse", { fill: "white" }), $(go.TextBlock, new go.Binding("text", "key")) ); diagram.groupTemplate = $(go.Group, "Vertical", $(go.Panel, "Auto", $(go.Shape, "RoundedRectangle", // surrounds the Placeholder { parameter1: 14, fill: "rgba(128,128,128,0.33)" }), $(go.Placeholder, // represents the area of all member parts, { padding: 5}) // with some extra padding around them ), $(go.TextBlock, // group title { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" }, new go.Binding("text", "key")) ); var nodeDataArray = [ { key: "Alpha" }, { key: "Beta", group: "Omega" }, { key: "Gamma", group: "Omega" }, { key: "Omega", isGroup: true }, { key: "Delta" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, // from outside the Group to inside it { from: "Beta", to: "Gamma" }, // this link is a member of the Group { from: "Omega", to: "Delta" } // from the Group to a Node ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
请注意,当您移动“ Beta”或“ Gamma”节点时,“ Omega”组会自动调整大小,以使该组上的TextBlock保持在“ RoundedRectangle”形状的下方和右侧。
就像图可以有自己的布局一样,组也可以有自己的Group.layout。在有关SubGraphs的页面中对此进行了讨论。
====================================================
想要购买GoJS正版授权的朋友可以
有关产品的最新消息和最新资讯,欢迎扫描关注下方微信公众号
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:GoJS本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢