Hi, I am a new user and I am using the free evaluation version of GoJS.
I am experimenting with GoJS since a while and now I am trying to add location binding to my diagram but it doesn’t work. I read carefully the ‘dataBinding.html’ tutorial and I added the parse function to my nodeTemplate:
new go.Binding("location", "loc",go.Point.parse)
but the nodes position is not affected. If I put some garbage data for loc property I can see the errors in the browser console, I think this means the binding is set up correctly, but with real Point values the nodes aren’t positioned in the way I expected.
Can someone give me some hints? Following is my full code:
`
function draw_chart() {
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, “nosOrganigrammaDiv”,
{
initialContentAlignment: go.Spot.TopCenter, //center the diagram
“undoManager.isEnabled”:true, /activate Ctrl-Z/
allowMove: false,
}); //end diagram
var sfondoSfumato=$(go.Brush, "Linear", { 0: "white", 1: "#e4e8f0" });
myDiagram.nodeTemplate=
$(go.Node, "Auto",
/* add Bindings here */
// example Node binding sets Node.location to the value of Node.data.loc
new go.Binding("location", "loc",go.Point.parse),
$(go.Panel,"Auto",
$(go.Shape, "RoundedRectangle",
{stroke:"#A2B6DA", strokeWidth: 2 },
new go.Binding("figure","structureFigure"),
// rosso se highlighted, sfumato altrimenti
new go.Binding("fill", "isHighlighted", function(h) { return h ? "#F44336" : sfondoSfumato; }).ofObject()
),
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left, margin: 4 },
$(go.RowColumnDefinition, { column: 2, width: 4 }),
$(go.TextBlock, "Nome Struttura",
{row:0, column:0, columnSpan:2, alignment:go.Spot.Center},
{margin: 2, stroke: "#6485C1", font: "bold 16px Roboto Regular" },
new go.Binding("text","structureName")),
$(go.Picture,
{row:1, column:0,alignment:go.Spot.Left},
{margin: 5, width: 50, height: 50, background: "white"},
new go.Binding("source")),
$(go.TextBlock, "Nome manager",
{row:1, column:1, columnSpan:2, alignment:go.Spot.Center},
{margin: 2, stroke: "#888888", font: "normal 16px Roboto Regular" },
new go.Binding("text","managerName"))
),
$("TreeExpanderButton",
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
{ visible: true })
)
);
var myModel=new go.GraphLinksModel(); // $(go.TreeModel);
myModel.nodeDataArray=
[{key:"3503",name:"StruturaWf2",loc:go.Point(600, 300),structureFigure:"StopSign",structureName:"StruturaWf2",type:"0",staff:false},
{key:"3603",name:"Struttura wf3",loc:go.Point(300, 500),structureFigure:"Ellipse",structureName:"Struttura wf3",type:"0",staff:false},
{key:"3502",name:"StruturaWf1",loc:go.Point(100, 100),structureFigure:"RoundedRectangle",structureName:"StruturaWf1",type:"0",staff:false},
{key:"3602",parent:"3502",name:"Figlio1",loc:go.Point(500, 500),structureFigure:"Rectangle",structureName:"Figlio1",type:"0",staff:false}
];
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 3 },
$(go.Shape, { strokeWidth: 1, stroke: "#414853" })); // the link shape
myDiagram.linkTemplateMap.add("Support",
$(go.Link,
{routing: go.Link.AvoidsNodes, corner: 15, curve: go.Link.JumpOver},
{ isLayoutPositioned: false, isTreeLink: false, curviness: -75 },
{ relinkableFrom: false, relinkableTo: false },
$(go.Shape,
{ stroke: "green", strokeWidth: 2 }),
$(go.Shape,
{ toArrow: "OpenTriangle", stroke: "green", strokeWidth: 2 }),
$(go.TextBlock,
new go.Binding("text", "text"),
{ stroke: "green", background: "rgba(255,255,255,0.75)",
maxSize: new go.Size(80, NaN)
})));
/* get array for links*/
myModel.linkDataArray=<%=chart.getJsonStringLinkDataArray(themeDisplay)%>;
myDiagram.addDiagramListener("ObjectDoubleClicked",
function(e) {
var part = e.subject.part;
if (!(part instanceof go.Link)) {
<portlet:namespace/>viewStructure(part.data.key,part.data.structureName);
}
});
myDiagram.addDiagramListener("InitialLayoutCompleted", function (e) {
console.info("inside InitialLayoutCompleted");
var nodes=e.diagram.nodes;
console.info("nodes.first="+nodes.first().data.name);
//nodes.first().expandTree(2);
var roots=e.diagram.findTreeRoots();
console.info("roots="+roots.count);
roots.each(function (r) { r.expandTree(2); });
});
myDiagram.model=myModel;
// zoom
new go.Overview("nosOrganigrammaOverviewDiv").observed = myDiagram;
}
);
`
