We are still evaluating GoJS library. We are trying to adapt Concept Map sample to angular application but getting “GraphLinksModel.linkKeyProperty must not be an empty string for .mergeLinkDataArray() to succeed” error. I added linktoKeyproperty but it is not helping. Can you please help me to fix the issue.
below is html:
<gojs-diagram #myDiagram [initDiagram]=‘initDiagram’ [nodeDataArray]=‘state.diagramNodeData’ [linkDataArray]=‘state.diagramLinkData’
[divClassName]=‘diagramDivClassName’ [modelData]=‘state.diagramModelData’>
component:
public state = {
// Diagram state props
diagramNodeData: [
{ id: 1, text: ‘Concept Maps’ },
{ id: 2, text: ‘Organized Knowledge’ },
{ id: 3, text: ‘Context Dependent’ },
{ id: 4, text: ‘Concepts’ },
{ id: 5, text: ‘Propositions’ },
{ id: 6, text: ‘Associated Feelings or Affect’ },
{ id: 7, text: ‘Perceived Regularities’ },
{ id: 8, text: ‘Labeled’ },
{ id: 9, text: ‘Hierarchically Structured’ },
{ id: 10, text: ‘Effective Teaching’ },
{ id: 11, text: ‘Crosslinks’ },
{ id: 12, text: ‘Effective Learning’ },
{ id: 13, text: ‘Events (Happenings)’ },
{ id: 14, text: ‘Objects (Things)’ },
{ id: 15, text: ‘Symbols’ },
{ id: 16, text: ‘Words’ },
{ id: 17, text: ‘Creativity’ },
{ id: 18, text: ‘Interrelationships’ },
{ id: 19, text: ‘Infants’ },
{ id: 20, text: ‘Different Map Segments’ }
],
diagramLinkData: [
{ key: -1, from: 1, to: 2, text: ‘represent’ },
{ key: -2, from: 2, to: 3, text: ‘is’ },
{ key: -3, from: 2, to: 4, text: ‘is’ },
{ key: -4, from: 2, to: 5, text: ‘is’ },
{ key: -5, from: 2, to: 6, text: ‘includes’ },
{ key: -6, from: 2, to: 10, text: ‘necessary\nfor’ },
{ key: -7, from: 2, to: 12, text: ‘necessary\nfor’ },
{ key: -8, from: 4, to: 5, text: ‘combine\nto form’ },
{ key: -9, from: 4, to: 6, text: ‘include’ },
{ key: -10, from: 4, to: 7, text: ‘are’ },
{ key: -11, from: 4, to: 8, text: ‘are’ },
{ key: -12, from: 4, to: 9, text: ‘are’ },
{ key: -13, from: 5, to: 9, text: ‘are’ },
{ key: -14, from: 5, to: 11, text: ‘may be’ },
{ key: -15, from: 7, to: 13, text: ‘in’ },
{ key: -16, from: 7, to: 14, text: ‘in’ },
{ key: -17, from: 7, to: 19, text: ‘begin\nwith’ },
{ key: -18, from: 8, to: 15, text: ‘with’ },
{ key: -19, from: 8, to: 16, text: ‘with’ },
{ key: -20, from: 9, to: 17, text: ‘aids’ },
{ key: -21, from: 11, to: 18, text: ‘show’ },
{ key: -22, from: 12, to: 19, text: ‘begins\nwith’ },
{ key: -23, from: 17, to: 18, text: ‘needed\nto see’ },
{ key: -24, from: 18, to: 20, text: ‘between’ }
],
diagramModelData: { prop: ‘text’ },
skipsDiagramUpdate: false,
};
public initDiagram(): go.Diagram {
const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
model: $(go.GraphLinksModel, {
nodeKeyProperty: ‘id’,
linkToKeyProperty: ‘key’
}),
initialAutoScale: go.Diagram.Uniform, // an initial automatic zoom-to-fit
contentAlignment: go.Spot.Center, // align document to the center of the viewport
layout: $(
go.ForceDirectedLayout, // automatically spread nodes apart
{ maxIterations: 200, defaultSpringLength: 30, defaultElectricalCharge: 100 }
)
});
dia.nodeTemplate = $(
go.Node,
'Auto', // the whole node panel
{ locationSpot: go.Spot.Center },
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, 'Rectangle', {
fill: $(go.Brush, 'Linear', { 0: 'rgb(254, 201, 0)', 1: 'rgb(254, 162, 0)' }),
stroke: 'black'
}),
$(
go.TextBlock,
{ font: 'bold 10pt helvetica, bold arial, sans-serif', margin: 4 },
new go.Binding('text', 'text')
)
);
dia.linkTemplate = $(
go.Link, // the whole link panel
$(
go.Shape, // the link shape
{ stroke: 'black' }
),
$(
go.Shape, // the arrowhead
{ toArrow: 'standard', stroke: null }
),
$(
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, // the label text
{
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
stroke: '#555555',
margin: 4
},
new go.Binding('text', 'text')
)
)
);
return dia;
}