Hi
We are using gojs in Angular app
One issue we are facing is that , always gojs giving below error once we start generating the gojs diagrams
Error: Invalid div id; div already has a Diagram associated with it.
Any fix for this issue ?
Regards
Kumar
That error message means that there already is a Diagram instance being hosted by that particular HTML Div element.
I do not know what your situation is, but I suggest that you not re-create the Diagram. Instead, create and initialize it once, including associating the Diagram with the Div. Then whenever you want to show a diagram, create a Model and set the Diagram.model.
Hi
I am creating gojs once and assigning the div and binding model
After selecting the different options in menu , I am getting data for nodes and links
Not I am only binding the model only , but still no luck
Attached is my code for GojsDraw()
if(myDiagram!=undefined)
{
myDiagram.model = $(go.GraphLinksModel);
myDiagram.model = new go.GraphLinksModel(data.nodeDataArray, data.linkDataArray);
}The first assignment, to an empty model, is unnecessary.
What is the problem?
And what is the value of data.nodeDataArray?
If you would like us to reproduce the problem or provide a sample that works with your data, it would help a lot if you provided the actual data in either JSON format or as JavaScript code, rather than a screenshot of text. Maybe in your case you only need to provide data for two nodes and one link.
If you are concerned about keeping the data private, just substitute text strings with innocuous values. Or send it to our support email address, our product name @nwoods.com.
Hi
please find attached sample json data for my project
{“shapeData”:"[{“key”:“1016606”,“text”:“20 Misbrug”,“color”:"#999900",“bounds”:null,“xloc”:0,“yloc”:0,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:“MDC”,“leafnode”:false,“tooltip”:null,“yellowbox”:false},{“key”:“1016607”,“text”:“Kontaktdage >1”,“color”:"#ffeb00",“bounds”:null,“xloc”:235,“yloc”:0,“fig”:“F M0 0 L300 0 L300 100 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:false,“tooltip”:null,“yellowbox”:true},{“key”:“1016608”,“text”:" 20M11 Alkoholisk psykose + andre alv. mentale",“color”:"#FFA918",“bounds”:null,“xloc”:470,“yloc”:0,“fig”:“F M0 100 L200 0 L400 100 L200 200 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:“DGCAT”,“leafnode”:false,“tooltip”:null,“yellowbox”:false},{“key”:“1016609”,“text”:“20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.”,“color”:"#d5d5c9",“bounds”:null,“xloc”:705,“yloc”:0,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:“DGCAT”,“leafnode”:true,“tooltip”:"",“yellowbox”:false},{“key”:“1016610”,“text”:" 20M12 Medicinforårsaget sindssygdom mv.",“color”:"#FFA918",“bounds”:null,“xloc”:470,“yloc”:130,“fig”:“F M0 100 L200 0 L400 100 L200 200 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:“DGCAT”,“leafnode”:false,“tooltip”:null,“yellowbox”:false},{“key”:“1016611”,“text”:“20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.”,“color”:"#d5d5c9",“bounds”:null,“xloc”:705,“yloc”:130,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:“DGCAT”,“leafnode”:true,“tooltip”:"",“yellowbox”:false},{“key”:“1016612”,“text”:“OR ikke tilladt”,“color”:"#ffeb00",“bounds”:null,“xloc”:470,“yloc”:260,“fig”:“F M0 0 L300 0 L300 100 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:false,“tooltip”:null,“yellowbox”:true},{“key”:“1016613”,“text”:" 20K00 Komplicerende bidiagnoser til MDC20",“color”:"#FFA918",“bounds”:null,“xloc”:705,“yloc”:260,“fig”:“F M0 100 L200 0 L400 100 L200 200 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:“DGALT”,“leafnode”:false,“tooltip”:null,“yellowbox”:false},{“key”:“1016614”,“text”:“20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.”,“color”:"#d5d5c9",“bounds”:null,“xloc”:940,“yloc”:260,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:“DGALT”,“leafnode”:true,“tooltip”:"",“yellowbox”:false},{“key”:“1016615”,“text”:“OR ikke tilladt”,“color”:"#ffeb00",“bounds”:null,“xloc”:235,“yloc”:390,“fig”:“F M0 0 L300 0 L300 100 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:false,“tooltip”:null,“yellowbox”:true},{“key”:“1016616”,“text”:“Kontaktdage <=1 “,“color”:”#ffeb00”,“bounds”:null,“xloc”:470,“yloc”:390,“fig”:“F M0 0 L300 0 L300 100 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:false,“tooltip”:null,“yellowbox”:true},{“key”:“1016620”,“text”:“20MA02 Alkohol- eller stofmisbrug eller afgiftning etc., u. kompl. bidiag.”,“color”:"#d5d5c9",“bounds”:null,“xloc”:1670,“yloc”:520,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:true,“tooltip”:"",“yellowbox”:false},{“key”:“1016617”,“text”:“Alder <7 år”,“color”:"#ffeb00",“bounds”:null,“xloc”:705,“yloc”:390,“fig”:“F M0 0 L300 0 L300 100 L0 100z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:false,“tooltip”:null,“yellowbox”:true},{“key”:“1016618”,“text”:“20MA99 MDC20 1-dagsgruppe, pat. 0-6 år”,“color”:"#d5d5c9",“bounds”:null,“xloc”:940,“yloc”:390,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:true,“tooltip”:"",“yellowbox”:false},{“key”:“1016619”,“text”:“20MA98 MDC20 1-dagsgruppe, pat. mindst 7 år”,“color”:"#d5d5c9",“bounds”:null,“xloc”:1905,“yloc”:520,“fig”:“F M0 0 L100 0 L100 200 L0 200 L0 200z”,“width”:“159”,“height”:“79”,“groupCode”:"",“leafnode”:true,“tooltip”:"",“yellowbox”:false}]",“linkData”:"[{“from”:“1016606”,“to”:“1016607”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016607”,“to”:“1016608”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016607”,“to”:“1016615”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016608”,“to”:“1016609”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016608”,“to”:“1016610”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016610”,“to”:“1016611”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016610”,“to”:“1016612”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016612”,“to”:“1016613”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016612”,“to”:“1016615”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016613”,“to”:“1016614”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016613”,“to”:“1016615”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016615”,“to”:“1016616”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016616”,“to”:“1016617”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016616”,“to”:“1016620”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”},{“from”:“1016617”,“to”:“1016618”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Right”,“toSpot”:“Left”,“fromPort”:“R”,“toPort”:“L”},{“from”:“1016617”,“to”:“1016619”,“routing”:“go.Link.Orthogonal”,“fromSpot”:“Bottom”,“toSpot”:“Top”,“fromPort”:“B”,“toPort”:“T”}]"}
Regards
Kumar
You haven’t provided your node template(s), so I had to guess. I did take a bit from our FlowChart sample. Here’s a partial screenshot of my result:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
function makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return $(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: function(e, port) {
port.fill = "transparent";
}
});
}
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "", function(d) { return new go.Point(d.xloc, d.yloc); }),
$(go.Panel, "Auto",
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8, maxSize: new go.Size(150, NaN) },
new go.Binding("text"))
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
);
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.Orthogonal, corner: 10,
reshapable: true,
relinkableFrom: true, relinkableTo: true
},
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model =
$(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeDataArray: [
{"key":"1016606","text":"20 Misbrug","color":"#999900","bounds":null,"xloc":0,"yloc":0,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"MDC","leafnode":false,"tooltip":null,"yellowbox":false},
{"key":"1016607","text":"Kontaktdage >1","color":"#ffeb00","bounds":null,"xloc":235,"yloc":0,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016608","text":" 20M11 Alkoholisk psykose + andre alv. mentale","color":"#FFA918","bounds":null,"xloc":470,"yloc":0,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGCAT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016609","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":705,"yloc":0,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGCAT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016610","text":" 20M12 Medicinforårsaget sindssygdom mv.","color":"#FFA918","bounds":null,"xloc":470,"yloc":130,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGCAT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016611","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":705,"yloc":130,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGCAT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016612","text":"OR ikke tilladt","color":"#ffeb00","bounds":null,"xloc":470,"yloc":260,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016613","text":" 20K00 Komplicerende bidiagnoser til MDC20","color":"#FFA918","bounds":null,"xloc":705,"yloc":260,"fig":"F M0 100 L200 0 L400 100 L200 200 L0 100z","width":"159","height":"79","groupCode":"DGALT","leafnode":false,"tooltip":null,"yellowbox":false},{"key":"1016614","text":"20MA01 Alkohol- eller stofmisbrug eller afhængighed og afgiftning etc., m. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":940,"yloc":260,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"DGALT","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016615","text":"OR ikke tilladt","color":"#ffeb00","bounds":null,"xloc":235,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016616","text":"Kontaktdage <=1 ","color":"#ffeb00","bounds":null,"xloc":470,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016620","text":"20MA02 Alkohol- eller stofmisbrug eller afgiftning etc., u. kompl. bidiag.","color":"#d5d5c9","bounds":null,"xloc":1670,"yloc":520,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016617","text":"Alder <7 år","color":"#ffeb00","bounds":null,"xloc":705,"yloc":390,"fig":"F M0 0 L300 0 L300 100 L0 100z","width":"159","height":"79","groupCode":"","leafnode":false,"tooltip":null,"yellowbox":true},{"key":"1016618","text":"20MA99 MDC20 1-dagsgruppe, pat. 0-6 år","color":"#d5d5c9","bounds":null,"xloc":940,"yloc":390,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false},{"key":"1016619","text":"20MA98 MDC20 1-dagsgruppe, pat. mindst 7 år","color":"#d5d5c9","bounds":null,"xloc":1905,"yloc":520,"fig":"F M0 0 L100 0 L100 200 L0 200 L0 200z","width":"159","height":"79","groupCode":"","leafnode":true,"tooltip":"","yellowbox":false}],
linkDataArray: [
{"from":"1016606","to":"1016607","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},
{"from":"1016607","to":"1016608","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016607","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016608","to":"1016609","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016608","to":"1016610","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016610","to":"1016611","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016610","to":"1016612","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016612","to":"1016613","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016612","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016613","to":"1016614","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016613","to":"1016615","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016615","to":"1016616","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016616","to":"1016617","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016616","to":"1016620","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"},{"from":"1016617","to":"1016618","routing":"go.Link.Orthogonal","fromSpot":"Right","toSpot":"Left","fromPort":"R","toPort":"L"},{"from":"1016617","to":"1016619","routing":"go.Link.Orthogonal","fromSpot":"Bottom","toSpot":"Top","fromPort":"B","toPort":"T"}]
});
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>