大多數樹結構都是作為層次結構構建的：節點的數量在每個級別上都增加。在我們的示例中，我們將查看一棵樹，其中並非所有分支的節點數量都比其前輩更高。在我們的樹中，某些節點將具有多個父節點，例如，有些節點具有多個祖先。
您可以在線嘗試示例：
為了構建該應用程序，我們使用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個鏈接：
我們以相同的方式繼續進行其余的圖表。我們創建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歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，尊重他人勞動成果