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);

转换函数可以是命名或匿名函数。他们把数据属性值作为参数，并返回适用于正在设置该属性的值。