下載GoJS最新版本

樣式節點

通過創建由GraphObjects組成的模板以及在這些對象上設置屬性來設置節點的樣式。要創建一個Node，我們可以使用幾個構建塊類：

• Shape，用于顯示帶顏色的預定義或自定義幾何體
• TextBlock，以各種字體顯示（可編輯的）文本
• Picture，顯示圖片
• Panel，用于容納其他物體的集合的容器，可以根據面板的類型（如桌子，垂直堆疊和拉伸容器）以不同的方式定位和調整尺寸

所有這些構建塊都是從GraphObject抽象類派生的 ，因此我們隨便將它們稱為GraphObjects或對象或元素。請注意，GraphObject 不是 HTML DOM元素，因此創建或修改此類對象的開銷不會太大。

我們希望模型數據屬性影響我們的節點，這是通過數據綁定完成的。數據綁定允許我們通過自動將這些GraphObjects上的屬性設置為從模型數據中獲取的值來更改節點中GraphObjects的外觀和行為。模型數據對象是純JavaScript對象。您可以選擇在模型中的節點數據上使用您喜歡的任何屬性名稱。

默認的Node模板很簡單：包含一個TextBlock的節點。TextBlock的text屬性和模型數據的key屬性之間存在數據綁定。在代碼中，模板看起來像這樣：

myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );
      

TextBlocks，Shapes和Pictures是GoJS的原始構建塊。TextBlocks不能包含圖像; 形狀不能包含文本。如果希望節點顯示某些文本，則必須使用TextBlock。如果要繪制或填充某些幾何圖形，則必須使用“形狀”。

更一般地說，Node模板的框架看起來像這樣：

myDiagram.nodeTemplate =
  $(go.Node, "Vertical", // second argument of a Node/Panel can be a Panel type
    /* set Node properties here */
    { // the Node.location point will be at the center of each node
      locationSpot: go.Spot.Center
    },

    /* add Bindings here */
    // example Node binding sets Node.location to the value of Node.data.loc
    new go.Binding("location", "loc"),

    /* add GraphObjects contained within the Node */
    // this Shape will be vertically above the TextBlock
    $(go.Shape,
      "RoundedRectangle", // string argument can name a predefined figure
      { /* set Shape properties here */ },
      // example Shape binding sets Shape.figure to the value of Node.data.fig
      new go.Binding("figure", "fig")),

    $(go.TextBlock,
      "default text",  // string argument can be initial text string
      { /* set TextBlock properties here */ },
      // example TextBlock binding sets TextBlock.text to the value of Node.data.key
      new go.Binding("text", "key"))
  );

Panel中GraphObjects的嵌套可以任意深入，每個類都有自己獨特的屬性集可供探索，但這顯示了一般的想法。

現在我們已經了解了如何制作Node模板，讓我們看一個實例。我們將制作組織圖中常見的簡單模板 - 名稱旁邊的圖像。請考慮以下Node模板：

“Horizontal”面板類型的節點，意味著其元素將并排水平布局。它有兩個要素：

• 用于肖像的圖片，其中包含圖像源數據
• 名稱的TextBlock，綁定了文本數據

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    // the entire node will have a light-blue background
    { background: "#44CCFF" },
    $(go.Picture,
      // Pictures should normally have an explicit width and height.
      // This picture has a red background, only visible when there is no source set
      // or when the image is partially transparent.
      { margin: 10, width: 50, height: 50, background: "red" },
      // Picture.source is data bound to the "source" attribute of the model data
      new go.Binding("source")),
    $(go.TextBlock,
      "Default Text",  // the initial value for TextBlock.text
      // some room around the text, a larger font, and a white stroke:
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      // TextBlock.text is data bound to the "name" attribute of the model data
      new go.Binding("text", "name"))
  );

var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
  // for this app we add the "name" and "source" properties
  { name: "Don Meow", source: "cat1.png" },
  { name: "Copricat", source: "cat2.png" },
  { name: "Demeter",  source: "cat3.png" },
  { /* Empty node data */  }
];
myDiagram.model = model;
      

該代碼生成此圖：

當不存在所有信息時，我們可能希望顯示一些“默認”狀態，例如，當圖像未加載或名稱未知時。此示例中的“空”節點數據用于顯示節點模板可以在沒有綁定數據的任何屬性的情況下完美地工作。

購買GoJS正版授權，請點擊“”喲！