In my app I load the data from a JSON stream coming back from server. Works fine but not with the new gojs-angular 2 wrapper.
I have tried to do it in the basic sample, doesn’t work either. Relevant code from sample :
- comment out intial data
public state = {
// Diagram state props
diagramNodeData: [
// { id: 'Alpha', text: "Alpha", color: 'lightblue' },
// { id: 'Beta', text: "Beta", color: 'orange' },
// { id: 'Gamma', text: "Gamma", color: 'lightgreen' },
// { id: 'Delta', text: "Delta", color: 'pink' }
],
diagramLinkData: [
// { key: -1, from: 'Alpha', to: 'Beta', fromPort: 'r', toPort: '1' },
// { key: -2, from: 'Alpha', to: 'Gamma', fromPort: 'b', toPort: 't' },
// { key: -3, from: 'Beta', to: 'Beta' },
// { key: -4, from: 'Gamma', to: 'Delta', fromPort: 'r', toPort: 'l' },
// { key: -5, from: 'Delta', to: 'Alpha', fromPort: 't', toPort: 'r' }
],
2.modify afterViewInit like this
public ngAfterViewInit() {
if (this.observedDiagram) return;
this.observedDiagram = this.myDiagramComponent.diagram;
// console.log(this.observedDiagram.model.toJson());
const data = JSON.parse(`{ "class": "GraphLinksModel",
"nodeKeyProperty": "id",
"linkKeyProperty": "key",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"modelData": {"prop":"value"},
"nodeDataArray": [
{"id":"Alpha","text":"Alpha","color":"lightblue"},
{"id":"Beta","text":"Beta","color":"orange"},
{"id":"Gamma","text":"Gamma","color":"lightgreen"},
{"id":"Delta","text":"Delta","color":"pink"}
],
"linkDataArray": [
{"key":-1,"from":"Alpha","to":"Beta","fromPort":"r","toPort":"1"},
{"key":-2,"from":"Alpha","to":"Gamma","fromPort":"b","toPort":"t"},
{"key":-3,"from":"Beta","to":"Beta"},
{"key":-4,"from":"Gamma","to":"Delta","fromPort":"r","toPort":"l"},
{"key":-5,"from":"Delta","to":"Alpha","fromPort":"t","toPort":"r"}
]}`);
this.state = produce(this.state, draft => {
draft.diagramNodeData = _.cloneDeep(data.nodeDataArray);
draft.diagramLinkData = _.cloneDeep(data.linkDataArray);
draft.skipsDiagramUpdate = false;
});
this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)
(I used lodash for cloning but you can use anything else)
I get a blank diagram instead of the nodes and links from json. What is the correct way to do this with the new wrapper ?