11 Update Graph
Step 12/13 — 12 Adjacency Graph Builder
01 Create Graph 02 Create Nodes Sources 03 Create Edges Sources 04 Group Nodes 05 Implicit Grouping 06 Configure Styles 07 Create Labels Sources 08 Configure Labels 09 Configure Tags 10 Configure Layout 11 Update Graph 12 Adjacency Graph Builder 13 Tree Builder
13 Tree Builder

# 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 `id`s 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 `id`s 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.

13 Tree Builder