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'}
];

目前也就只能先寫這麼多吧！！入門的話問題不大了