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>

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

通過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' });

    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'}）;
    };

關于Factory類的妙處在于，它會自動將新創建的DiagramItem -s（例如節點和鏈接）添加到圖的項目集合中。您還可以分別將新創建的DiagramNode -s和DiagramLink -s分別作為節點和鏈接集合的成員。

現在，我們具有從第一級到第二級的所有5個節點的5個鏈接：

三.布局

我們使用LayeredLayout布置圖的所有節點。由于該圖不是典型的樹，因此我們首選LayeredLayout而不是TreeLayout

var lLayout = new MindFusion.Graphs.LayeredLayout（）;
diagram.arrange（lLayout）;

在我們的例子中，LayeredLayout看起來不錯，到此，我們就完成了樹的構建。

關于JavaScript繪圖：此本地JavaScript庫為開發人員提供了創建和自定義任何類型的圖，決策樹，流程圖，類層次結構，圖，家譜樹，BPMN圖等的能力。該控件提供了豐富的事件集，眾多的自定義選項，動畫，圖形操作，樣式和主題。您有100多個預定義節點，表節點和15多種自動布局算法。通過//mindfusion.eu/javascript-diagram.html了解有關JavaScript制圖的更多信息。