12 Adjacency Graph Builder - Tutorial: Graph Builder [yFiles for HTML]

Building a graph with the AdjacencyGraphBuilder

In this tutorial step we show how to use AdjacencyGraphBuilder to build a graph from data, where the relationship information between the nodes is part of the node data entry.

The data

Consider the following list of data objects, which represents a basic organization chart. In this example, every data object has an id and optionally a colleagues property. The colleagues property, if available, contains a list with the ids of the colleagues of the associated node object.

{
  id: '0',
  position: 'Chief Executive Officer',
  name: 'Eric Joplin',
  colleagues: ['0_0', '0_1']
},
{
  id: '0_0',
  position: 'Chief Executive Assistant',
  name: 'Gary Roberts',
  colleagues: ['0_0_0', '0_0_1']
},
{
  id: '0_0_0',
  position: 'Senior Executive Assistant',
  name: 'Alexander Burns'
},
{
  id: '0_0_1',
  position: 'Junior Executive Assistant',
  name: 'Linda Newland'
},
{
  id: '0_1',
  position: 'Vice President of Production',
  name: 'Amy Kain',
  colleagues: ['0_1_0']
},
{
  id: '0_1_0',
  position: 'Production Supervisor',
  name: 'Kathy Maxwell'
}

Building the graph

In the first step, we instantiate the AdjacencyGraphBuilder and configure an AdjacencyNodesSource.

const adjacencyGraphBuilder = new AdjacencyGraphBuilder(graph)

const adjacencyNodesSource = adjacencyGraphBuilder.createNodesSource(
  nodesData,
  (item) => item.id
)

In the second step, we configure the colleagues or successors on the AdjacencyNodesSource. For edge creation, we use an EdgeCreator with a default configuration.

adjacencyNodesSource.addSuccessorIds(
  (data) => data.colleagues,
  new EdgeCreator({ defaults: graph.edgeDefaults })
)

Finally, we add labels to the graph building process by providing a label binding for the NodesSource's NodeCreator.

adjacencyNodesSource.nodeCreator.createLabelBinding({
  text: (dataItem) => dataItem.name
})

Note	AdjacencyGraphBuilder supports the same labeling functionality as the GraphBuilder.

In this tutorial step, we built a graph with AdjacencyGraphBuilder using the ids provided by the data entries for the calculation of successors. Of course, it is also possible to define predecessors in a similar manner.

Yet another functionality of AdjacencyGraphBuilder is to use predecessor/successor sources. See the AdjacencyGraphBuilder Developer’s Guide for an in-depth discussion.

Note	Please have a look in this tutorial step’s demo code in `adjacency-graph-building.ts` and play around with the different ways to import business data.