(2) GoJS Node简介
node
GoJS提供了非常简单的创建Node节点的方法，可将文本内容、结点形状、背景颜色、边距等属性通过数据绑定[go.Binding]直接绑定到对应的Node数据中。
本文简单介绍Node的创建过程及对应属性的绑定。
1.simple node
创建一个只包含文本的Node,利用数据绑定，设置节点的背景颜色、文本内容、节点形状。代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.7/go-debug.js"></script>
<title>Document</title>
</head>
<body>
<div id="myDiagramDiv" style="width:300px; height:300px; background-color: #DAE4E4;"></div>
<script>
var $ = go.GraphObject.make;
//取创建的DIV作为画布
var diagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom//通过鼠标滚轮放大或缩小画布
});
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
new go.Binding("figure","shape"), //绑定Node的形状，也可直接设置Shape.figure
new go.Binding("fill", "color")), //绑定背景填充颜色
$(go.TextBlock,
{ margin: 5 },
new go.Binding("text", "key")) //绑定文本内容，显示在对应的Node上
);
//Node原始数据
diagram.model.nodeDataArray = [
{ key: "Alpha", color: "lightblue", shape:"Rectangle" },
{ key: "Beta", color: "yellow", shape:"Circle" }，
{ key: "Gamma", color: "lightblue", fig: "Hexagon" },
{ key: "Delta", color: "lightblue", fig: "FramedRectangle" }
];
</script>
</body>
</html>
设置go.Shape属性可以给node添加不同的样式，example:
$(go.Shape, "Rectangle",{
figure: "Club"//Node形状
width: 40, //设置Node宽度,单位px
height: 60, //Node高度
margin: 4, //边距
fill: "green", //填充颜色
background:"yellow"//背景颜色
strokeWidth:2//线宽
})
设置go.TextBlock的属性可以给文本添加不同的样式，example:
$(go.TextBlock, { text: "a Text Block",
background: "lightgreen",
margin: 2,
width: 100,
height: 33,
alignment:go.Spot.Right
})
