繪製拓撲圖

需求：繪製一個機構各個部門下機器的申請情況關係拓撲圖。
可以用gojs這個插件，不過僅限學習研究實驗演示，不作商業用途。
1.html中定義一塊畫圖區域

<div id="myDiagram"></div>

2.文檔末加載腳本

<script type="text/javascript">
   window.onload = init();
</script>

3.腳本

<script type="text/javascript">
			var AjaxRequestBack=false;
			var IdList;
			function init() {
				if (window.goSamples) goSamples();
				var $ = go.GraphObject.make;
				//整個拓撲圖的位置
				myDiagram = $(go.Diagram, "myDiagram",{initialContentAlignment: go.Spot.TopCenter});
				//節點的圖片，根據傳進來的參數獲取相對應的圖片
				function nodeTypeImage(type) {
					if (type.charAt(0) === "0") return "images/0.png";
					if (type.charAt(0) === "1") return "images/1.png";
					if (type.charAt(0) === "2") return "images/2.png";
					return "images/0.png";
				}

				function nodeProblemConverter(msg) {
					if (msg) return "red";
					return null;
				}
				//判斷節點左邊形狀
				function nodeOperationConverter(s) {
					if (s >= 2) return "TriangleDown";
					if (s >= 1) return "Rectangle";
					return "Circle";
				}
				//判斷節點右邊形狀的顏色
				function nodeStatusConverter(s) {
					if (s >= 2) return "red";
					if (s >= 1) return "green";
					return "green";
				}

				myDiagram.nodeTemplate =
					$(go.Node, "Vertical",
						{ selectable: true,
							mouseOver: function (e, obj) {//鼠標進入響應的事件方法
								//nodeDoubleClick(e, obj) //事件調用方法
							}
						},
						{locationObjectName: "ICON" },
						$(go.Panel, "Spot",
						$(go.Panel, "Auto",
							{ name: "ICON" }, 
						$(go.Shape,
							{ fill: null, portId: "", strokeWidth: 0,stroke: null },
							new go.Binding("background", "problem", nodeProblemConverter)), 
						$(go.Picture,
							{ margin: 0 },
							{ desiredSize: new go.Size(60, 60) },
							new go.Binding("source", "type", nodeTypeImage))), //這裏是用節點的類型，即是用的圖片


			$(go.Shape, "Circle",
				{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //TopLeft顯示的位置
					width: 0, height: 0, fill: "Green"
				}, new go.Binding("fill", "status", nodeStatusConverter)) //這裏是用節點狀態參數
			),
			//這裏是節點文字的樣式
			$(go.TextBlock,
			{ font: "bold 7px Helvetica, bold Arial, sans-serif",stroke: "black", margin: 3 },new go.Binding("text")));

			//設置線條的顏色
			function linkProblemConverter(msg) {
				if (msg) return "red";
				return "#cccccc";
			}

			myDiagram.linkTemplate =
			$(go.Link, go.Link.AvoidsNodes,
				{ corner: 3 }, //控制線的轉彎的弧度
			$(go.Shape,
				{ strokeWidth: 1 }, //控制線條的粗細
				new go.Binding("stroke", "problem", linkProblemConverter)));

			//節點的佈局
			myDiagram.layout = $(go.LayeredDigraphLayout,
				{ direction: 270, //拓撲圖的方向
					layerSpacing: 10,
					columnSpacing: 25,
					setsPortSpots: false
				});

			//加載數據
			load();
			myDiagram.makeImage({
				scale: 1,
				background: "AntiqueWhite",
				type: "image/jpeg",
				details: 0.05
			});
		}
		function load() {
			var str = <%=sbstr%>;
			myDiagram.model = go.Model.fromJson(str);

			var arr = myDiagram.model.nodeDataArray;
			for (var i = 0; i < arr.length; i++) {
			// alert(arr[i].text);
			}
		}
	</script>