gojs-GraphObjects构建零件

一个非常简单的Node可能包含Shape和TextBlock。您可以使用以下代码构建GraphObjects的这种可视化树：

	var diagram = new go.Diagram("diagram");
	var node = new go.Node(go.Panel.Auto);  //创建节点
	var shape = new go.Shape(); //创建形状
	shape.figure = "RoundedRectangle"; //形状样子
	shape.fill = "lightblue"; // 形状背景
	node.add(shape);  //把形状添加到节点中
	
	var textblock = new go.TextBlock(); //创建文本
	textblock.text = "Hello!"; //文本内容
    textblock.margin = 5; // 文本周围空间
    
	node.add(textblock); //把文本添加到节点
	diagram.add(node); // 把节点添加到画布

虽然以这种方式构建节点将起作用，但随着节点变得更复杂，代码将变得更加复杂以便阅读和维护。

推荐使用：GraphObject.make 构建

var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "myDiagramDiv");
diagram.add(
  $(go.Node, go.Panel.Auto,
    $(go.Shape,
      { figure: "RoundedRectangle", fill: "lightblue" }),
    $(go.TextBlock,
      { text: "Hello!", margin: 5 })
  ));

这样写和上面的写法效果是一样的；

GoJS定义了一个静态函数GraphObject.make，它在构造GraphObjects时非常有用，而不必考虑和跟踪临时变量名。此静态函数还支持以嵌套方式构建对象，其中缩进为您提供有关可视树中深度的线索，与上面显示的简单线性代码不同。

GraphObject.make是一个函数，其第一个参数必须是类类型，通常是GraphObject的子类。
GraphObject.make的 其他参数可能有以下几种类型：

1.具有属性/值对的纯JavaScript对象 - 在要构造的对象上设置这些属性值
2.一个GraphObject，作为元素添加到正在构造的Panel中
3.一个GoJS枚举值常量，用作可以接受这样一个值的正在构造的对象的唯一属性的值
4.一个字符串，用于设置正在构造的对象的TextBlock.text，Shape.figure，Picture.source或Panel.type属性
5.一个RowColumnDefinition，用于描述在表的行或列面板小号
6.一个JavaScript数组，保存GraphObject.make的参数，在从函数返回多个参数时很有用

使用$作为go.GraphObject.make的缩写是非常方便的，例如：var $ = go.GraphObject.make;当然也可以使用:$$ GO等

var $$ = go.GraphObject.make;

var GO = go.GraphObject.make;

使用GraphObject.make的另一个好处是，它将确保您设置的任何属性都是类的定义属性。如果属性名称中有拼写错误，则会抛出错误，您可以在控制台日志中看到一条消息。

以下是GraphObject.make用于构建图表画布的广泛用法：

var myDiagram =
    $(go.Diagram, "myDiagramDiv",  // HTML元素ID
    //属性配置对象
      {
        //在加载新模型之前不要初始化某些属性
        "InitialLayoutCompleted": loadDiagramProperties, 
        //在图表上设置属性时，您可以使用属性名称，这些属性名称由两个以句点分隔的标识符组成。句点之前的名称用作图表或Diagram.toolManager上的属性名称，该图表返回要设置其属性的对象。句点后面的名称是设置的属性的名称。请注意，由于存在嵌入的句点，因此JavaScript属性语法要求您使用引号。例如：下面俩个配置
        // 使鼠标滚轮事件放大和缩小，而不是上下滚动
        "toolManager.mouseWheelBehavior":go.ToolManager.WheelZoom,
        //为通过单击创建的每个新节点指定要复制的数据对象
        "clickCreatingTool.archetypeNodeData": { text: "new node" }
      });
  // loadDiagramProperties侦听器
  function loadDiagramProperties(e) { . . . }

下面附一张画布基础属性配置对象图片