如何创建具有多个父节点的树
大多数树结构都是作为层次结构构建的:节点的数量在每个级别上都增加。在我们的示例中,我们将查看一棵树,其中并非所有分支的节点数量都比其前辈更高。在我们的树中,某些节点将具有多个父节点,例如,有些节点具有多个祖先。
您可以在线尝试示例:
![](https://mindfusion.eu/samples/javascript/diagram/multiple_parents_app.png)
为了构建该应用程序,我们使用MindFusion Diagramming for JavaScript库。
I.常规设置
在网页中,我们添加了初始化Canvas的代码。我们给画布一个id:
<div style="overflow: visible; height: 100%; margin: 1px; padding: 0px;"> <canvas id="diagram" width="2100" height="2500"> This page requires a browser that supports HTML 5 Canvas element. </canvas> </div>
我们添加了对提供图表功能的两个JavaScipt文件的引用:MindFusion.Diagramming和MindFusion.Common。我们还添加了对代码隐藏文件的引用,该文件包含我们应用程序的JavaScript代码:
<script src="Scripts/MindFusion.Common.js" type="text/javascript"></script>
<script src="Scripts/MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="MultipleParentNodes.js" type="text/javascript"></script>
我们已将这些文件放在名为Scripts的子文件夹中,该子文件夹位于我们的主应用程序文件夹中。
二.图表设置
我们在window.onload事件处理程序中创建该图。我们要确保所有脚本都已加载:
window.onload = function(e) { var diagramEl = document.getElementById('diagram'); // create a Diagram component that wraps the "diagram" canvas diagram = AbstractionLayer.createControl(Diagram, null, null, null, diagramEl); diagram.setAllowInplaceEdit(true); diagram.setRouteLinks(true); diagram.setShowGrid(true); diagram.setRoundedLinks(true); diagram.setBounds(new Rect(0, 0, 2000,2500)); }
我们使用对网页中Canvas的DOM元素的引用来创建图。我们将其allowInplaceEdit属性设置为true,这使用户可以交互式地编辑节点和链接。我们使用showGrid渲染背景网格,以帮助对齐节点和链接。我们使用setBounds方法设置setRoundedLinks并为图表做大工作。
二.创建图节点
我们在单独的方法中创建DiagramNode -s,在创建控件并完成所有设置后调用该方法:
function onLoaded() { var nodes = {}; for(var i = 0; i < 5; i++) { nodes[i] = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12)); nodes[i].setShape('Rectangle'); nodes[i].setBrush({ type: 'SolidBrush', color: '#567939' }); };
我们初始化一个列表,在其中我们将动态存储我们要引用的那些节点。首先,我们创建5个ShapeNode -s,它们是树的第一层。我们使用Factory的createShapeNode方法创建ShapeNode -s和DiagramLink -s。注意,我们将创建所有具有相等边界的节点。我们不必担心它们的位置,因为我们将在最后应用自动布局。
通过Diagram的getFactory方法可以使用Factory。通常,您不创建类,而是通过Diagram实例获取其实例。
我们使用setShape为我们希望节点采用的图表形状提供ID。可以在在线帮助中找到带有可用图表形状及其ID的列表。
我们还使用setBrush来指定ShapeNode的填充。在我们的例子中,我们使用SolidBrush,但是还有其他选项可供选择。
然后,我们将创建一个ShapeNode,它将成为下一个级别:
var node5 = diagram.getFactory().createShapeNode(new Rect(20, 20, 20, 12 )); node5.setShape('Rectangle'); node5.setBrush({ type: 'SolidBrush', color: '#6f9c49' });
我们用比第一级节点略浅的绿色着色。然后,我们再次使用Factory类在第一级的5个节点和第二级的一个节点之间创建DiagramLink -s:
for(var i = 0; i <5; i ++) { var link = diagram.getFactory()。createDiagramLink(nodes [i],node5); link.setHeadShape(“ Triangle”); link.setText(“ 20%”); link.setHeadShapeSize(3.0); link.setHeadBrush({type:'SolidBrush',color:'#7F7F7F'}); };
DiagramLink类的setText和setHeadShape方法允许我们在最后指定链接的标签及其形状。还有setBaseShape,它允许我们在DiagramLink的开始处指定形状。
关于Factory类的妙处在于,它会自动将新创建的DiagramItem -s(例如节点和链接)添加到图的项目集合中。您还可以分别将新创建的DiagramNode -s和DiagramLink -s分别作为节点和链接集合的成员。
现在,我们具有从第一级到第二级的所有5个节点的5个链接:
![å¤ç¶èç¹](https://mindfusion.eu/samples/javascript/diagram/node_multiple_parents.png)
我们以相同的方式继续进行其余的图表。我们创建ShapeNode与-s 厂,然后绑定与节点厂。
三.布局
我们使用LayeredLayout布置图的所有节点。由于该图不是典型的树,因此我们首选LayeredLayout而不是TreeLayout
var lLayout = new MindFusion.Graphs.LayeredLayout(); diagram.arrange(lLayout);
在图上应用任何其他算法真的很容易-您只需要创建它的一个实例,然后调用图的range方法来应用该实例。您可以快速更改布局并进行实验,看看哪种布局效果最好。
在我们的例子中,LayeredLayout看起来不错,到此,我们就完成了树的构建。
关于JavaScript绘图:此本地JavaScript库为开发人员提供了创建和自定义任何类型的图,决策树,流程图,类层次结构,图,家谱树,BPMN图等的能力。该控件提供了丰富的事件集,众多的自定义选项,动画,图形操作,样式和主题。您有100多个预定义节点,表节点和15多种自动布局算法。通过https://mindfusion.eu/javascript-diagram.html了解有关JavaScript制图的更多信息。
APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率
想要了解甘特图或慧都APS系统,请登录慧都网咨询在线客服,解决您的问题!
本文章转载自【慧都科技】evget欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果