Hi guys:
I am leaning gojs to show the transaction flow , but now there is a problem, the diagram shows like the following:
Then I use the mouse to drag one of the components , It turns OK:
Can you help me ? why the links in the first pic is not friendly?
my codes as following:
================================================================
function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
//{ mouseOver: function (e, obj){ nodeDoubleClick(e, obj) }},
{ locationSpot: go.Spot.Center },
$(go.Shape, "RoundedRectangle",
{
fill: "white", // the default fill, if there is no data-binding
portId: "", cursor: "pointer", // the Shape is the port, not the whole Node
fromLinkable: false, fromLinkableSelfNode: false, fromLinkableDuplicates: false,
toLinkable: false, toLinkableSelfNode: false, toLinkableDuplicates: false
},
new go.Binding("fill", "color")),
$(go.TextBlock,
{
font: "bold 14px sans-serif",
stroke: '#333',
margin: 6, // make some extra space for the shape around the text
isMultiline: false, // don't allow newlines in text
editable: false // allow in-place editing by user
},
new go.Binding("text", "text").makeTwoWay()) // the label shows the node data's text
);
myDiagram.layout = $(go.LayeredDigraphLayout,
{
layerSpacing: 100,
setsPortSpots: false
});
// The link shape and arrowhead have their stroke brush data bound to the "color" property
myDiagram.linkTemplate =
$(go.Link,
{
curve: go.Link.Bezier
},
$(go.Shape,
{ strokeWidth: 1 },
new go.Binding("stroke", "color")),
$(go.Shape,
{ toArrow: "Standard", stroke: null },
new go.Binding("fill", "color")),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial",
{ 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
stroke: null
}),
$(go.TextBlock, "transition", // the label text
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
margin: 0,
editable: false // enable in-place editing
},
new go.Binding("text").makeTwoWay())
)
);
// Create the Diagram's Model:
var nodeDataArray = [
{ key: 0, text: "system1", color: "lightblue" },
{ key: 1, text: "system2", color: "orange" },
{ key: 2, text: "system3", color: "pink"}
];
var linkDataArray = [
{ "from": 0, "to": 1, "text": "1#0.351"},
{ "from": 1, "to": 0, "text": "2#0.352"},
{ "from": 0, "to": 1, "text": "3#0.351"},
{ "from": 1, "to": 0, "text": "4#0.352"},
{ "from": 0, "to": 1, "text": "5#0.351"},
{ "from": 1, "to": 0, "text": "6#0.352"},
{ "from": 0, "to": 1, "text": "7#0.351"},
{ "from": 1, "to": 0, "text": "8#0.352"},
{ "from": 1, "to": 2, "text": "9#0.323" },
{ "from": 2, "to": 1, "text": "10#0.221" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}