GoJS 绘图 (九) ：数据绑定

2016-07-06 01:50:00

绑定字符串和数字特性

绑定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);
转换函数可以是命名或匿名函数。他们把数据属性值作为参数，并返回适用于正在设置该属性的值。