Creating Concept Map sample in angular application

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;

}

You need to set linkKeyProperty, not linkToKeyProperty.

1 Like

perfect, thanks