GoJS 绘图 (九) ：数据绑定

fobnn 发布于2019-08-19 18:31 / 2495人阅读

摘要：绑定字符串和数字特性绑定数据的属性。转换功能你可以通过转换函数的第三个参数绑定构造函数。允许位置字符串的形式来指定，而不是作为一个表达式的点。转换函数可以是命名或匿名函数。他们把数据属性值作为参数，并返回适用于正在设置该属性的值。

绑定字符串和数字特性

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79646.html

GoJS 绘图 (八) ：模型和模版

摘要：下面是这样做的一种方式使用模型和模板事实上，图已经为节点和链接非常简单的默认模板。该特定节点的数据已投入对象的数组。因此，我们需要替换节点模版。数据绑定数据绑定是一种声明声明一个对象的属性值应该用于设置另一个对象的属性值。使用模版构视图让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式： var node1 = g( go.Node, Auto, ...

Hanks10100 2019-08-21 10:52 评论0 收藏0
GoJS 绘图 (一) ：入门

摘要：是一个库，让你轻松创建现代浏览器的交互图。支持图形化的模板和图形对象属性数据模型的数据绑定。许多预定义的工具和命令执行，大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题。 GoJS是一个JavaScript库，让你轻松创建现代Web浏览器的交互图。 GoJS支持图形化的模板和图形对象属性数据模型的数据绑定。你只需要保存和恢复模型，包括持有任何性质的应用需求，简单的J...

X_AirDu 2019-08-19 18:23 评论0 收藏0
GoJS 绘图 (四) ：构建节点与GraphObjects

摘要：你可以构建一个节点或其类型的代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的示意图。一个非常简单的节点由一个与构成。虽然以这种方式构建的节点将工作变得更加复杂的代码将变得更加难以阅读和维护。你可以构建一个节点或其类型的JavaScript代码。以下将讨论基本类型，你可以用它来建立一个节点对象。这些页面通过明确创建和添加节点和链路建立的...

jokester 2019-08-19 18:25 评论0 收藏0
GoJS 绘图 (十) ：链接（完结）

摘要：非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。可以很容易地建立方向，只需添加一个形状并设置其属性。目前也就只能先写这么多吧入门的话问题不大了非定向链接最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。 diag...

Rocko 2019-08-22 10:33 评论0 收藏0
GoJS 绘图 (六) ：横向面板（panel）

摘要：横向面板属性和纵向面板基本相同只是排列顺序不同默认对齐和拉伸垂直和水平两个面板的支持的和属性。这是一种便捷的方式使您不必设置每个元件的或横向面板属性和纵向面板基本相同只是排列顺序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

Hancock_Xu 2019-08-19 18:26 评论0 收藏0