Angular 2 - 流程圖/序列圖 - 庫

Question

我有一個與圖表創建和渲染相關的特定要求。

雖然我們已經能夠找到：jsplumbtoolkit、mermaid 和 gojs，它們具有很好的功能，但這些似乎都不符合我們的要求。

例如考慮 A --> B（A 與 B 使用 1 px 實心黑色連接線連接）

我需要一個庫，我可以在其中從代碼動態更改連接器。 例如，動態地我應該能夠將 2 個節點之間的連接器從 1px 純黑色轉換為 5 px 純黑色。
另一個有趣的功能是：我可以將我的連接器分成兩部分嗎，例如用 2 像素紅色顯示 30%，用 5 像素黑色顯示其余 70%。

如果有任何圖書館（免費/付費）具有支持此功能的功能，我請求您提供意見？ 還是我們的團隊應該專注於創建我們自己的？

謝謝瓦倫

Answer 1

我認為這展示了您正在尋找的基本功能：

<!DOCTYPE html>
<html>
<head>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<link href="goSamples.css" rel="stylesheet" type="text/css"/>  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,

          // Whenever a link is added to the GraphLinksModel, add a label Node to the Link and two Links:
          // one from the "fromNode" to the new label node, and one from the label node to the "toNode".
          // All three Parts are *not* added to the model, but are added directly to the Diagram.
          "ModelChanged": function(e) {
            if (e.modelChange === "linkDataArray") {
              if (e.change === go.ChangedEvent.Property) {
                var arr = e.newValue;
                for (var i = 0; i < arr.length; i++) {
                  labelLink(arr[i]);
                }
              } else if (e.change === go.ChangedEvent.Insert) {
                labelLink(e.newValue);
              }
            } else if (e.modelChange === "linkFromKey") {
              decorateFirstHalf(e.object);
            } else if (e.modelChange === "linkToKey") {
              decorateSecondHalf(e.object);
            }
          }
        });

    function labelLink(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null && link.labelNodes.count === 0 && link.selectable) {
        // this is not a template and thus cannot support Bindings
        var lab = $(go.Node, { selectable: false, copyable: false, movable: false, isLayoutPositioned: false },
                    $(go.Shape, { width: 0, height: 0, stroke: null, strokeWidth: 0 })
                  );
        myDiagram.add(lab);
        lab.labeledLink = link;
        if (link.fromNode !== null) decorateFirstHalf(linkdata);
        if (link.toNode !== null) decorateSecondHalf(linkdata);
      } else {
        if (window.console) window.console.log("no link? " + link);
      }
    }

    function decorateFirstHalf(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null) {
        var lab = link.labelNodes.first();
        if (lab !== null) {
          var first = lab.findLinksInto().first();
          // this is not a template and thus cannot support Bindings
          if (!first) first = $(go.Link, { selectable: false, pickable: false, isLayoutPositioned: false },
                                $(go.Shape, { stroke: "red", strokeWidth: 2 })
                              );
          first.fromNode = link.fromNode;
          first.toNode = lab;
          myDiagram.add(first);
        }
      }
    }

    function decorateSecondHalf(linkdata) {
      var link = myDiagram.findLinkForData(linkdata);
      if (link !== null) {
        var lab = link.labelNodes.first();
        if (lab !== null) {
          var second = lab.findLinksOutOf().first();
          // this is not a template and thus cannot support Bindings
          if (!second) second = $(go.Link, { selectable: false, pickable: false, isLayoutPositioned: false },
                                  $(go.Shape, { stroke: "green", strokeWidth: 2, strokeDashArray: [4, 2] })
                                );
          second.fromNode = lab;
          second.toNode = link.toNode;
          myDiagram.add(second);
        }
      }
    }

    // templates

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
        $(go.TextBlock,
          { margin: 5 },
          new go.Binding("text", "", go.Binding.toString))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { relinkableFrom: true, relinkableTo: true, selectionAdorned: false },
        $(go.Shape, { stroke: "transparent", strokeWidth: 2 }),
        $(go.Shape, { toArrow: "OpenTriangle", stroke: "blue", strokeWidth: 1.5 })
      );

    // model

    myDiagram.model.nodeDataArray = [
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ];
    myDiagram.model.linkDataArray = [
      { from: "Alpha", to: "Beta" }
    ];

    myDiagram.model.undoManager.isEnabled = true;

    // for debug-time understanding what's happening to the model:
    myDiagram.addModelChangedListener(function(e) {
      if (e.isTransactionFinished) {
        // update the model information shown on the page
        document.getElementById("savedData").textContent = myDiagram.model.toJson();
      }
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:300px;"></div>
  <div style="display: inline">
    Saved JSON data:<br />
    <pre id="savedData" />
  </div>
</body>
</html>

它可以擴展到演示兩個筆畫以 30% 而不是 50% 的距離變化並動態修改單個鏈接的形狀屬性。 如果您對我們的 nwoods.com 域中的 GoJS 感興趣，請聯系我們。

Angular 2 - 流程圖/序列圖 - 庫

問題描述

1 個解決方案

解決方案1
1 2016-10-03 10:57:36

Angular 2 - 流程圖/序列圖 - 庫

問題描述

1 個解決方案

解決方案1 1 2016-10-03 10:57:36

解決方案1
1 2016-10-03 10:57:36