如何创建具有多个父节点的树

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

您可以在线尝试示例：

为了构建该应用程序，我们使用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代码：

我们已将这些文件放在名为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个链接：

我们以相同的方式继续进行其余的图表。我们创建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欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

posted @ 2020-09-28 13:34 roffey 阅读(1064) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

如何创建具有多个父节点的树

公告