成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

fobnn / 2546人閱讀

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

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

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

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

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的值是一個點(diǎn)，因此，在本實(shí)例中的數(shù)據(jù)屬性必須是一個點(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)換功能

你可以通過轉(zhuǎn)換函數(shù)的第三個參數(shù)綁定構(gòu)造函數(shù)。在這種情況下Point.parse。允許位置字符串（“100 50”）的形式來指定，而不是作為一個表達(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è)置該屬性的值。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79646.html

相關(guān)文章

  • GoJS 繪圖 (八) ：模型和模版

    摘要：下面是這樣做的一種方式使用模型和模板事實(shí)上，圖已經(jīng)為節(jié)點(diǎn)和鏈接非常簡單的默認(rèn)模板。該特定節(jié)點(diǎn)的數(shù)據(jù)已投入對象的數(shù)組。因此，我們需要替換節(jié)點(diǎn)模版。數(shù)據(jù)綁定數(shù)據(jù)綁定是一種聲明聲明一個對象的屬性值應(yīng)該用于設(shè)置另一個對象的屬性值。 使用模版構(gòu)視圖 讓我們嘗試建立兩個節(jié)點(diǎn)，將它們與一個鏈接連接。下面是這樣做的一種方式： var node1 = g( go.Node, Auto, ...

    Hanks10100 評論0 收藏0

  • GoJS 繪圖 (一) ：入門

    摘要：是一個庫，讓你輕松創(chuàng)建現(xiàn)代瀏覽器的交互圖。支持圖形化的模板和圖形對象屬性數(shù)據(jù)模型的數(shù)據(jù)綁定。許多預(yù)定義的工具和命令執(zhí)行，大部分的圖表所需要的標(biāo)準(zhǔn)的行為。外觀和行為的定制是大多設(shè)置屬性的問題。 GoJS是一個JavaScript庫，讓你輕松創(chuàng)建現(xiàn)代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數(shù)據(jù)模型的數(shù)據(jù)綁定。你只需要保存和恢復(fù)模型，包括持有任何性質(zhì)的應(yīng)用需求，簡單的J...

    X_AirDu 評論0 收藏0

  • GoJS 繪圖 (四) ：構(gòu)建節(jié)點(diǎn)與GraphObjects

    摘要：你可以構(gòu)建一個節(jié)點(diǎn)或其類型的代碼。以下將討論基本類型，你可以用它來建立一個節(jié)點(diǎn)對象。這些頁面通過明確創(chuàng)建和添加節(jié)點(diǎn)和鏈路建立的示意圖。一個非常簡單的節(jié)點(diǎn)由一個與構(gòu)成。雖然以這種方式構(gòu)建的節(jié)點(diǎn)將工作變得更加復(fù)雜的代碼將變得更加難以閱讀和維護(hù)。 你可以構(gòu)建一個節(jié)點(diǎn)或其類型的JavaScript代碼。以下將討論基本類型，你可以用它來建立一個節(jié)點(diǎn)對象。這些頁面通過明確創(chuàng)建和添加節(jié)點(diǎn)和鏈路建立的...

    jokester 評論0 收藏0

  • GoJS 繪圖 (十) ：鏈接（完結(jié)）

    摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點(diǎn)?？梢院苋菀椎亟⒎较颍恍杼砑右粋€形狀并設(shè)置其屬性。目前也就只能先寫這么多吧入門的話問題不大了 非定向鏈接 最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因?yàn)檫@是在節(jié)點(diǎn)之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點(diǎn)。 diag...

    Rocko 評論0 收藏0

  • GoJS 繪圖 (六) ：橫向面板（panel）

    摘要：橫向面板屬性和縱向面板基本相同只是排列順序不同默認(rèn)對齊和拉伸垂直和水平兩個面板的支持的和屬性。這是一種便捷的方式使您不必設(shè)置每個元件的或 橫向面板 屬性和縱向面板基本相同只是排列順序不同 diagram.add(G( go.Part, go.Panel.Horizontal, { position: new go.Point(500, 0), ...

    Hancock_Xu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<