Javascript 角度2-流程图/序列图-库
我有一个与图表创建和呈现相关的特定需求 尽管我们能够找到： JsToolkit、mermaid和gojs都有很好的特性，但它们似乎都不符合我们的要求Javascript 角度2-流程图/序列图-库,javascript,svg,angular,flowchart,Javascript,Svg,Angular,Flowchart,我有一个与图表创建和呈现相关的特定需求 尽管我们能够找到： JsToolkit、mermaid和gojs都有很好的特性，但它们似乎都不符合我们的要求 例如考虑A-＞B（A用1 PX实心黑色连接线与B连接） 我需要一个库，在其中我可以从代码动态更改连接器。e、 g.动态地，我应该能够在2个节点之间将连接器从1px纯黑转换为5px纯黑 另一个有趣的功能是：我可以把我的连接器分成两部分吗？例如，用2像素的红色显示30%，用5像素的黑色显示70% 我请求您的输入，如果有任何图书馆（免费/付费）具有支
例如考虑A-＞B（A用1 PX实心黑色连接线与B连接）
- 我需要一个库，在其中我可以从代码动态更改连接器。e、 g.动态地，我应该能够在2个节点之间将连接器从1px纯黑转换为5px纯黑
- 另一个有趣的功能是：我可以把我的连接器分成两部分吗？例如，用2像素的红色显示30%，用5像素的黑色显示70%
瓦伦我认为这展示了您所寻找的基本功能：
<!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>
函数init（）{
var$=go.GraphObject.make；
我的图表=
$（go.Diagram，“myDiagramDiv”，
{
initialContentAlignment:go.Spot.Center，
//无论何时将链接添加到GraphlinkModel，都要将标签节点添加到该链接和两个链接：
//一个从“fromNode”到新标签节点，一个从标签节点到“toNode”。
//所有这三个部分*不是*添加到模型中，而是直接添加到图表中。
“模型更改”：功能（e）{
如果（如modelChange==“linkDataArray”）{
if（e.change===go.ChangedEvent.Property）{
var arr=e.newValue；
对于（变量i=0；i它可以扩展到演示两个笔划以30%而不是50%的距离变化，并动态修改各个链接的形状属性。如果您对nwoods.com域中的GoJS感兴趣，请与我们联系。嘿，您是否找到了适合Angular2的GoJS？不，我们基于d3创建了自定义库，该库根据我们的业务逻辑处理动画。我已经内联了临时HTML页面，该页面直到最近才保存了示例代码。