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

Hanks10100 發布于2019-08-21 10:52 / 1767人閱讀

摘要：下面是這樣做的一種方式使用模型和模板事實上，圖已經為節點和鏈接非常簡單的默認模板。該特定節點的數據已投入對象的數組。因此，我們需要替換節點模版。數據綁定數據綁定是一種聲明聲明一個對象的屬性值應該用于設置另一個對象的屬性值。

使用模版構視圖

讓我們嘗試建立兩個節點，將它們與一個鏈接連接。下面是這樣做的一種方式：

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

使用模型和模板

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

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

一般節點不會使用默認方式。因此，我們需要替換節點模版：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);

現在圖看起來更好，但節點沒有參數 - 他們都是相同的！我們可以實現通過使用數據綁定。

數據綁定

數據綁定是一種聲明聲明一個對象的屬性值應該用于設置另一個對象的屬性值。

在這種情況下，我們要確保TextBlock.text屬性獲取相應的節點數據的“key”。我們要確保的Shape.fill屬性被設置為相應的節點數據的“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);

GPU云服務器云服務器 GoJS 屏幕繪圖繪圖程序繪圖工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86337.html

GoJS 繪圖 (四) ：構建節點與GraphObjects

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

jokester 2019-08-19 18:25 評論0 收藏0
GoJS 繪圖 (一) ：入門

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

X_AirDu 2019-08-19 18:23 評論0 收藏0
GoJS 繪圖 (十) ：鏈接（完結）

摘要：非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。可以很容易地建立方向，只需添加一個形狀并設置其屬性。目前也就只能先寫這么多吧入門的話問題不大了非定向鏈接最簡單的鏈接沒有箭頭指示方向。該模板只包含一個形狀為主要元素，因為這是在節點之間繪制的線條。鏈接的路線被計算后將得到一個路徑的點。 diag...

Rocko 2019-08-22 10:33 評論0 收藏0
GoJS 繪圖 (三) ：shapes

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

siberiawolf 2019-08-19 18:24 評論0 收藏0
GoJS 繪圖 (二) ：TextBlocks

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

岳光 2019-08-19 18:24 評論0 收藏0