成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Hanks10100 / 1770人閱讀

摘要：下面是這樣做的一種方式使用模型和模板事實(shí)上，圖已經(jīng)為節(jié)點(diǎn)和鏈接非常簡(jiǎn)單的默認(rèn)模板。該特定節(jié)點(diǎn)的數(shù)據(jù)已投入對(duì)象的數(shù)組。因此，我們需要替換節(jié)點(diǎn)模版。數(shù)據(jù)綁定數(shù)據(jù)綁定是一種聲明聲明一個(gè)對(duì)象的屬性值應(yīng)該用于設(shè)置另一個(gè)對(duì)象的屬性值。

使用模版構(gòu)視圖

讓我們嘗試建立兩個(gè)節(jié)點(diǎn)，將它們與一個(gè)鏈接連接。下面是這樣做的一種方式：

var node1 = g(
    go.Node,
    "Auto",
    g(
        go.Shape,
        {
            fill: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "node1"
        }
    )
);
diagram.add(node1);
var node2 = g(
    go.Node,
    "Auto",
    g(
        go.Shape,
        {
            fill: "#943"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "node1"
        }
    )
);
diagram.add(node2);
diagram.add(g(
    go.Link,
    {
        fromNode: node1,
        toNode: node2
    },
    g(
        go.Shape
    )
));
使用模型和模板

事實(shí)上，圖已經(jīng)為節(jié)點(diǎn)和鏈接非常簡(jiǎn)單的默認(rèn)模板。如果您想自定義您的圖表中的節(jié)點(diǎn)的外觀，你可以通過(guò)設(shè)置替換默認(rèn)節(jié)點(diǎn)模板Diagram.nodeTemplate。
讓我們創(chuàng)建一個(gè)圖表，提供必要信息。該特定節(jié)點(diǎn)的數(shù)據(jù)已投入JavaScript對(duì)象的數(shù)組。我們聲明在鏈路的數(shù)據(jù)對(duì)象一個(gè)??多帶帶的數(shù)組鏈接關(guān)系。每個(gè)鏈路數(shù)據(jù)，通過(guò)使用他們的密鑰保存到所述節(jié)點(diǎn)的數(shù)據(jù)。通常情況下，引用“from”和“to”屬性的值。

var nodeDataArray = [
    { key: "Alpha"},
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

一般節(jié)點(diǎn)不會(huì)使用默認(rèn)方式。因此，我們需要替換節(jié)點(diǎn)模版：Diagram.nodeTemplate。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" }),
      $(go.TextBlock,
        { text: "hello!",
          margin: 5 })
    );

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

現(xiàn)在圖看起來(lái)更好，但節(jié)點(diǎn)沒(méi)有參數(shù) - 他們都是相同的！我們可以實(shí)現(xiàn)通過(guò)使用數(shù)據(jù)綁定。

數(shù)據(jù)綁定

數(shù)據(jù)綁定是一種聲明聲明一個(gè)對(duì)象的屬性值應(yīng)該用于設(shè)置另一個(gè)對(duì)象的屬性值。

在這種情況下，我們要確保TextBlock.text屬性獲取相應(yīng)的節(jié)點(diǎn)數(shù)據(jù)的“key”。我們要確保的Shape.fill屬性被設(shè)置為相應(yīng)的節(jié)點(diǎn)數(shù)據(jù)的“color”屬性值給出的顏色。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" },  
        new go.Binding("fill", "color")),
        $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },  
    { key: "Beta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86337.html

相關(guān)文章

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

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

    jokester 評(píng)論0 收藏0

  • GoJS 繪圖 (一) ：入門(mén)

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

    X_AirDu 評(píng)論0 收藏0

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

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

    Rocko 評(píng)論0 收藏0

  • GoJS 繪圖 (三) ：shapes

    摘要：繪制一個(gè)幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫(huà)和填充。形狀不像的和，形狀不能包含任何其他對(duì)象。還需要設(shè)置或和參數(shù)，作為確定形狀尺寸。在這些簡(jiǎn)單的演示，該代碼創(chuàng)建一個(gè)圖形，并將其添加到畫(huà)布中。屬性指定輪廓的粗細(xì)。 繪制一個(gè)幾何圖形。您可以控制什么樣的形狀繪制以及它是如何繪畫(huà)和填充。形狀不像的TextBlocks和Pictures，形狀不能包含任何其他對(duì)象。 基礎(chǔ)圖形 您可以...

    siberiawolf 評(píng)論0 收藏0

  • GoJS 繪圖 (二) ：TextBlocks

    摘要：使用類來(lái)顯示文本字體和顏色大小和文本的外觀風(fēng)格被指定。為了換行的情況發(fā)生，屬性不能為無(wú)，必須有一些限制寬窄文本塊默認(rèn)文本塊不換行剪裁文本塊換行文本塊清理邊距對(duì)齊方式屬性指定的尺寸內(nèi)繪制文字點(diǎn)排列方式。注驗(yàn)證稍后完善。 使用TextBlocks類來(lái)顯示文本. 字體和顏色 大小和文本的外觀風(fēng)格被指定TextBlock.font。值可以是任何CSS字體符串。文本顏色使用TextBlock.s...

    岳光 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<