GOJS入门(3)

为Node Link增加样式

通过构建图形对象模版及设置属性的方式控制node的样式，主要包括以下几个方面

• Shape：显示预定义或自定义有色彩的几何图形
• TextBlock：显示不同字体的文本
• Picture：显示图片
• Panel：嵌套包含其他类型对象

感觉和app开发比较类似，对每个node定义一个template的layout，然后通过数据控制页面展示形式

比较常见的model，或者layout，包括GraphLinksModel和TreeModel
在GraphLinksModel，在nodeDataArray基础上增加了linkDataArray，表示不同节点之间的联系。

var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;

GraphLinksModel允许节点间拥有多个不同方向的链接。例如可以有10条从A到B的链接和3条从B到A的链接
TreeModel和GraphLinksModel有一些不同，通过node和link构造一个树形的模型，每个节点只能有一个父节点。

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;

但是通过这样展示出来的图形没有正确的布局，需要通过设置layout展示
图表的默认布局并不友好，没有提供节点的位置信息。我们可以通过定义每个节点的位置来改变这种混乱的状态，不过更好的解决方案是通过一些更加简单的解决方案，可以自动提供位置信息。
以树形模型为例，最自然的选择是一个树形的布局，默认是根是在最左边，可以通过旋转的方式，设置根在其他位置。

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;