MindFusion.Diagramming for WinForms使用教程：创建具有多个父节点的树

在此博客文章中，我们将说明如何创建具有多个父节点的树。在我们的示例中，我们将查看一棵树，其中并非所有分支的节点数量都比其前辈更高。

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在抢购立享优惠只需2345，立即查看详情>>

MindFusion.Diagramming for WinForms最新试用版

大多数树结构都是作为层次结构构建的：节点的数量在每个级别上都增加。在我们的示例中，我们将查看一棵树，其中并非所有分支的节点数量都比其前辈更高。在我们的树中，某些节点将具有多个父节点，例如，有些节点具有多个祖先。

您可以在线尝试示例：

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

二.创建图节点

我们在单独的方法中创建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个链接：

三.布局

我们使用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制图的更多信息。

想要购买该产品正版授权请点击【商城购买】，想了解更多产品信息请点击【咨询在线客服】

标签：