彩票走势图

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

GoJS现已更新至最新版本2.1发布，添加了动画功能，修复了一些bug，增强用户体验，赶快下载试试吧~

点击下载GoJS最新试用版

节点中的端口

尽管您可以控制链接在节点上的连接位置（在特定位置，沿着一个或多个侧面或在与边缘的相交处），但是有时您希望在链接上使用不同的逻辑和图形位置应该连接。链接可以连接的元素称为 端口。节点中可以有任意数量的端口。默认情况下，只有一个端口，即整个节点，这导致将整个节点用作端口的效果，如您在所有前面的示例中所看到的。

要声明Node中的特定元素是端口，请将GraphObject.portId属性设置为字符串。请注意，与端口或链接相关的属性可以应用于节点的可视树中的任何元素，这就是为什么它们是GraphObject而不是Node的属性的原因。

类似于端口的GraphObjects只能位于Node或Group中，而不能位于Link或Adornment或简单Part中。因此，没有理由尝试在Link中的任何对象上设置GraphObject.portId。

单端口

在许多情况下，您想考虑与整个节点在逻辑上相关的链接，但是您不希望链接到整个节点。在这种情况下，每个节点只有一个端口，但是您不希望整个节点都充当一个端口。

例如，考虑当整个节点以一种通用方式充当端口时，链路如何连接到节点。该GraphObject.fromSpot和GraphObject.toSpot是在双方的中段。因为整个节点的高度都包含文本标签，所以边的中间不是“图标”的中间，在这种情况下，该“图标”是一个圆。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      { fromSpot: go.Spot.Right, toSpot: go.Spot.Left },   // port properties on the node
      $(go.Shape, "Ellipse",
        { width: 30, height: 30, fill: "green" }),
      $(go.TextBlock,
        { font: "20px sans-serif" },
        new go.Binding("text", "key"))
    );
 
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

这种外观看起来或行为不正确。确实，我们希望链接连接到圆形Shape。

如果要让特定元素充当端口而不是整个节点，则只需将其GraphObject.portId设置为空字符串即可。空字符串是默认端口的名称。

在此示例中，我们在圆形上设置GraphObject.portId。请注意，我们也将其他与端口相关的属性（例如端口斑点）移到了该对象。

  diagram.nodeTemplate =
    $(go.Node, "Vertical",
      $(go.Shape, "Ellipse",
        { width: 30, height: 30, fill: "green",
          portId: "",  // now the Shape is the port, not the whole Node
          fromSpot: go.Spot.Right,  // port properties go on the port!
          toSpot: go.Spot.Left
        }),
      $(go.TextBlock,
        { font: "20px sans-serif" },
        new go.Binding("text", "key"))
    );
 
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

注意链接如何通过忽略文本标签很好地连接圆形。

一般端口

在节点中需要多个端口的图表中也很常见。端口数量甚至可能动态变化。

为了使链接数据对象能够区分链接应该连接到哪个端口，GraphLinksModel支持两个附加的数据属性，这些属性标识链接两端节点中端口的名称。 GraphLinksModel.getToKeyForLinkData标识要连接的节点； GraphLinksModel.getToPortIdForLinkData标识节点内的端口。同样，GraphLinksModel.getFromKeyForLinkData和GraphLinksModel.getFromPortIdForLinkData标识节点及其端口。

通常，GraphLinksModel假定不需要识别链接数据上的端口信息。如果要在链接数据上支持端口标识符，则需要将GraphLinksModel.linkToPortIdProperty 和GraphLinksModel.linkFromPortIdProperty设置为链接数据属性的名称。如果未设置这些属性，则所有端口标识符都假定为空字符串，这是节点的一个默认端口的名称。

如果已将任何元素上的GraphObject.portId设置或绑定为非空字符串，则需要使用GraphLinksModel并将GraphLinksModel.linkToPortIdProperty 和GraphLinksModel.linkFromPortIdProperty设置为链接数据上两个属性的名称，或者将需要对链接模板中的portId名称进行硬编码（即Link.fromPortId和Link.toPortId），以便用户能够与这些端口链接。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.Panel, "Table",
        $(go.RowColumnDefinition,
          { column: 0, alignment: go.Spot.Left}),
        $(go.RowColumnDefinition,
          { column: 2, alignment: go.Spot.Right }),
        $(go.TextBlock,  // the node title
          { column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
            font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) },
          new go.Binding("text", "key")),
        $(go.Panel, "Horizontal",
          { column: 0, row: 1 },
          $(go.Shape,  // the "A" port
            { width: 6, height: 6, portId: "A", toSpot: go.Spot.Left }),
          $(go.TextBlock, "A")  // "A" port label
        ),
        $(go.Panel, "Horizontal",
          { column: 0, row: 2 },
          $(go.Shape,  // the "B" port
            { width: 6, height: 6, portId: "B", toSpot: go.Spot.Left }),
          $(go.TextBlock, "B")  // "B" port label
        ),
        $(go.Panel, "Horizontal",
          { column: 2, row: 1, rowSpan: 2 },
          $(go.TextBlock, "Out"),  // "Out" port label
          $(go.Shape,  // the "Out" port
            { width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right })
        )
      )
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 3 },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  diagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
 
  diagram.model =
    $(go.GraphLinksModel,
      { linkFromPortIdProperty: "fromPort",  // required information:
        linkToPortIdProperty: "toPort",      // identifies data property names
        nodeDataArray: [
          { key: "Add1" },
          { key: "Add2" },
          { key: "Subtract1" }
        ],
        linkDataArray: [
          { from: "Add1", fromPort: "Out", to: "Subtract1", toPort: "A" },
          { from: "Add2", fromPort: "Out", to: "Subtract1", toPort: "B" }
        ] });

绘制新链接

将GraphObject.fromLinkable和GraphObject.toLinkable 属性中的一个或两个设置为true可使用户以交互方式在端口之间绘制新链接。

要绘制新链接，请在“ Out”端口上向下拖动鼠标，将其移动（拖动）到附近的输入端口，然后向上拖动鼠标以完成链接。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle", { fill: "lightgray" }),
      $(go.Panel, "Table",
        $(go.RowColumnDefinition,
          { column: 0, alignment: go.Spot.Left}),
        $(go.RowColumnDefinition,
          { column: 2, alignment: go.Spot.Right }),
        $(go.TextBlock,  // the node title
          { column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
            font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) },
          new go.Binding("text", "key")),
        $(go.Panel, "Horizontal",
          { column: 0, row: 1 },
          $(go.Shape,  // the "A" port
            { width: 6, height: 6, portId: "A", toSpot: go.Spot.Left,
              toLinkable: true, toMaxLinks: 1 }),  // allow user-drawn links from here
          $(go.TextBlock, "A")  // "A" port label
        ),
        $(go.Panel, "Horizontal",
          { column: 0, row: 2 },
          $(go.Shape,  // the "B" port
            { width: 6, height: 6, portId: "B", toSpot: go.Spot.Left,
              toLinkable: true, toMaxLinks: 1 }),  // allow user-drawn links from here
          $(go.TextBlock, "B")  // "B" port label
        ),
        $(go.Panel, "Horizontal",
          { column: 2, row: 1, rowSpan: 2 },
          $(go.TextBlock, "Out"),  // "Out" port label
          $(go.Shape,  // the "Out" port
            { width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right,
              fromLinkable: true })  // allow user-drawn links to here
        )
      )
    );
 
  diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 3 },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );
 
  diagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
 
  diagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
 
  diagram.model =
    $(go.GraphLinksModel,
      { linkFromPortIdProperty: "fromPort",  // required information:
        linkToPortIdProperty: "toPort",      // identifies data property names
        nodeDataArray: [
          { key: "Add1" },
          { key: "Add2" },
          { key: "Subtract1" }
        ],
        linkDataArray: [
          // no predeclared links
        ] });

默认情况下，用户不得在任何一对端口之间沿相同方向绘制多个链接，也不能绘制将节点与其自身连接的链接。

如本示例所示， 通过将GraphObject.toMaxLinks设置为1，用户最多可以绘制一个进入该端口的链接。并且由于该端口元素的GraphObject.fromLinkable为false，因此用户将无法连接从该端口发出的任何链接。

如果要阻止用户将一个Link连接到一个以上的Link，无论方向如何，都需要实现LinkingBaseTool.linkValidation或Node.linkValidation谓词。

=====================================================

想要购买GoJS正版授权的朋友可以。

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼