GoJS 绘图 (八) ：模型和模版

Hanks10100 发布于2019-08-21 10:52 / 1763人阅读

摘要：下面是这样做的一种方式使用模型和模板事实上，图已经为节点和链接非常简单的默认模板。该特定节点的数据已投入对象的数组。因此，我们需要替换节点模版。数据绑定数据绑定是一种声明声明一个对象的属性值应该用于设置另一个对象的属性值。

使用模版构视图

让我们尝试建立两个节点，将它们与一个链接连接。下面是这样做的一种方式：

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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