var diagram = new go.Diagram("canvas");
var $$ = go.GraphObject.make;
diagram.initialContentAlignment = go.Spot.Center;
diagram.undoManager.isEnabled = false;
diagram.isReadOnly = true
diagram.allowSelect = false;
diagram.initialAutoScale = go.Diagram.Uniform;
var state = [{text: 'q0', initial: true, final: false}, {text: 'q1', initial: false, final: true}];
$.each(state , function (i, v) {
var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
shape.figure = "Circle";
if (v.final)
shape.figure = "Ring";
if (v.initial) {
shape.fill = "lightblue";
} else {
shape.fill = "White";
}
node.key = v.text;
node.add(shape);
var textblock = new go.TextBlock();
textblock.text = v.text;
textblock.margin = 15;
node.add(textblock);
diagram.add(node);
});
with this the result is:
Well, that is ok. Now, I need to draw the transitions between q0 and q1. I try to draw using GraphLinksModel, but i cant.
I've alsotried using this:
var initialNode = diagram.findNodeForKey(v.Initial);
var finalNode = diagram.findNodeForKey(v.Final);
var link = new go.Link();
link.fromNode = initialNode;
link.toNode = finalNode;
diagram.add(link);
What can I do??
Thanks
<span id=“result_” =“short_text”=“” lang=“en”><span =“hps”=“”>The result <span =“hps”=“”>should be <span =“hps”=“”>something like:
In general its better to deal with Nodes and Links as model data than adding them directly to the Diagram. This is how the majority of our samples are set up, and Nodes and Links can be added to model data dynamically with Diagram.model.addNodeData(data) and Diagram.model.addLinkData(data)
You could replace its node and link templates with the ones you have designed so far, and consider the addNodeAndLink method for example usage of addNodeData and addLinkData:
// clicking the button inserts a new node to the right of the selected node,// and adds a link to that new nodefunctionaddNodeAndLink(e, obj) {var adorn = obj.part;
if (adorn === null) return;
e.handled = true;
var diagram = adorn.diagram;
diagram.startTransaction("Add State");
// get the node data for which the user clicked the buttonvar fromNode = adorn.adornedPart;
var fromData = fromNode.data;
// create a new "State" data object, positioned off to the right of the adorned Nodevar toData = { text: "new" };
var p = fromNode.location;
toData.loc = p.x + 200 + " " + p.y; // the "loc" property is a string, not a Point object// add the new node data to the modelvar model = diagram.model;
model.addNodeData(toData);
// create a link data from the old node data to the new node datavar linkdata = {};
linkdata[model.linkFromKeyProperty] = model.getKeyForNodeData(fromData);
linkdata[model.linkToKeyProperty] = model.getKeyForNodeData(toData);
// and add the link data to the model
model.addLinkData(linkdata);
// select the new Nodevar newnode = diagram.findNodeForData(toData);
diagram.select(newnode);
diagram.commitTransaction("Add State");
}