GoJS 繪圖 (九) ：數(shù)據(jù)綁定

fobnn 發(fā)布于2019-08-19 18:31 / 2496人閱讀

摘要：綁定字符串和數(shù)字特性綁定數(shù)據(jù)的屬性。轉(zhuǎn)換功能你可以通過(guò)轉(zhuǎn)換函數(shù)的第三個(gè)參數(shù)綁定構(gòu)造函數(shù)。允許位置字符串的形式來(lái)指定，而不是作為一個(gè)表達(dá)式的點(diǎn)。轉(zhuǎn)換函數(shù)可以是命名或匿名函數(shù)。他們把數(shù)據(jù)屬性值作為參數(shù)，并返回適用于正在設(shè)置該屬性的值。

綁定字符串和數(shù)字特性

綁定GraphObject數(shù)據(jù)的屬性。在這個(gè)例子中，我們不僅綁定TextBlock.text和Shape.fill中的節(jié)點(diǎn)到節(jié)點(diǎn)數(shù)據(jù)的屬性值，對(duì)于線條我們也結(jié)合Shape.stroke和Shape.strokeWidth中的數(shù)據(jù)的屬性值。

所有你需要做的就是添加目標(biāo)GraphObject一個(gè)新的綁定對(duì)象和數(shù)據(jù)對(duì)象的屬性。當(dāng)然，目標(biāo)屬性必須是一個(gè)可設(shè)置屬性;如果指定了一個(gè)不存在的，你會(huì)在控制臺(tái)中看到警告信息的屬性名稱。如果源屬性值是未定義，則不計(jì)算。

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

綁定對(duì)象的屬性

您也可以綁定具有對(duì)象值的屬性。例如常見(jiàn)的Part.location。

Part.location的值是一個(gè)點(diǎn)，因此，在本實(shí)例中的數(shù)據(jù)屬性必須是一個(gè)點(diǎn)。

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

轉(zhuǎn)換功能

你可以通過(guò)轉(zhuǎn)換函數(shù)的第三個(gè)參數(shù)綁定構(gòu)造函數(shù)。在這種情況下Point.parse。允許位置字符串（“100 50”）的形式來(lái)指定，而不是作為一個(gè)表達(dá)式的點(diǎn)。

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

轉(zhuǎn)換函數(shù)可以是命名或匿名函數(shù)。他們把數(shù)據(jù)屬性值作為參數(shù)，并返回適用于正在設(shè)置該屬性的值。