GoJS 繪圖 (九) ：數據綁定

綁定字符串和數字特性

綁定GraphObject數據的屬性。在這個例子中，咱們不只綁定TextBlock.text和Shape.fill中的節點到節點數據的屬性值，對於線條咱們也結合Shape.stroke和Shape.strokeWidth中的數據的屬性值。

全部你須要作的就是添加目標GraphObject一個新的綁定對象和數據對象的屬性。固然，目標屬性必須是一個可設置屬性;若是指定了一個不存在的，你會在控制檯中看到警告信息的屬性名稱。若是源屬性值是未定義，則不計算。

var diagram = new go.Diagram('diagram');
var g = go.GraphObject.make;

diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    g(
        go.Shape,
        'RoundedRectangle',
        { fill: '#fff' },
        new go.Binding('fill', 'color')
    ),
    g(
        go.TextBlock,
        new go.Binding('text', 'text')
    )
)
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape,
        new go.Binding('stroke', 'color'),
        new go.Binding('strokeWidth', 'thick')
    ),
    g(
        go.Shape,
        { toArrow: 'OpenTriangle', fill: null}
    )
)
var nodeDataArray = [
    { key:'1', text: 'hello1', color: '#345'},
    { key:'2', text: 'hello2', color: '#245'},
    { key:'3', text: 'hello3'}
]
var linkDataArray = [
    {from: '1', to: '2', color: '#452', thick: 2},
    {from: '2', to: '3', color: '#452', thick: 2},
]
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

綁定對象的屬性

您也能夠綁定具備對象值的屬性。例如常見的Part.location。

Part.location的值是一個點，所以，在本實例中的數據屬性必須是一個點。

diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    new go.Binding('location', 'loc'),
    g(
        go.Shape,
        'RoundedRectangle',
        { fill: '#fff' },
        new go.Binding('fill', 'color')
    ),
    g(
        go.TextBlock,
        new go.Binding('text', 'text')
    )
)
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape,
        new go.Binding('stroke', 'color'),
        new go.Binding('strokeWidth', 'thick')
    ),
    g(
        go.Shape,
        { toArrow: 'OpenTriangle', fill: null}
    )
)
var nodeDataArray = [
    { key:'1', text: 'hello1', color: '#345', loc: new go.Point(0, 0)},
    { key:'2', text: 'hello2', color: '#245', loc: new go.Point(0, 100)},
    { key:'3', text: 'hello3', loc: new go.Point(0, 200)}
]
var linkDataArray = [
    {from: '1', to: '2', color: '#452', thick: 2},
    {from: '2', to: '3', color: '#452', thick: 2},
]
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

轉換功能

你能夠經過轉換函數的第三個參數綁定構造函數。在這種狀況下Point.parse。容許位置字符串（「100 50」）的形式來指定，而不是做爲一個表達式的點。

diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    new go.Binding('location', 'loc', go.Point.parse),
    g(
        go.Shape,
        'RoundedRectangle',
        { fill: '#fff' },
        new go.Binding('fill', 'color')
    ),
    g(
        go.TextBlock,
        new go.Binding('text', 'text')
    )
)
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape,
        new go.Binding('stroke', 'color'),
        new go.Binding('strokeWidth', 'thick')
    ),
    g(
        go.Shape,
        { toArrow: 'OpenTriangle', fill: null}
    )
)
var nodeDataArray = [
    { key:'1', text: 'hello1', color: '#345', loc: '0, 0'},
    { key:'2', text: 'hello2', color: '#245', loc: '0, 150'},
    { key:'3', text: 'hello3', loc: '0, 250'}
]
var linkDataArray = [
    {from: '1', to: '2', color: '#452', thick: 2},
    {from: '2', to: '3', color: '#452', thick: 2},
]
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

轉換函數能夠是命名或匿名函數。他們把數據屬性值做爲參數，並返回適用於正在設置該屬性的值。