GoJS 绘图 (十) ：连接（完结）

非定向连接

最简单的连接没有箭头指示方向。
该模板只包含一个形状为主要元素，由于这是在节点之间绘制的线条。连接的路线被计算后将获得一个路径的点。

diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    new go.Binding('location', 'loc', go.Point.Parse),
    g(
        go.Shape,
        'RoundedRectangle',
        {
            fill: '#ddd'
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding('text', 'key')
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
    )
);
var nodeDateArray = [
    { key: 'apple', loc: '0 0'},
    { key: 'object-c', loc: '0 150'}
];

var linkDataArray = [
    { from: 'apple', to: 'object-c'}
];

定向连接

许多节点都须要用指示的方向性。 GoJS能够很容易地创建方向，只需添加一个形状并设置其Shape.toArrow属性。固然你也能够设置其它形状的属性，如Shape.fill以自定义箭头的外观。

var diagram = new go.Diagram('diagram');
var g = go.GraphObject.make;
diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    new go.Binding('location', 'loc', go.Point.Parse),
    g(
        go.Shape,
        'RoundedRectangle',
        {
            fill: '#ddd'
        }
    ),
    g(
        go.TextBlock,
        {
            margin: 5
        },
        new go.Binding('text', 'key')
    )
);
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape
        g(
            go.Shape,
            {
                toArrow: 'OpenTriangle',
                fill: null
            }
        )
    )
);
var nodeDateArray = [
    { key: 'apple', loc: '0 0'},
    { key: 'object-c', loc: '0 150'}
];

var linkDataArray = [
    { from: 'apple', to: 'object-c'}
];

目前也就只能先写这么多吧！！入门的话问题不大了