Creating a Custom Tree Graph using D3 in UI5: Data visualization is a very important aspect of analysis. As such it has become an indispensable part of the same. Not only does it make the information appealing and interactive but also the most efficient means of delivering data.

One such visualization tool is the tree graph. Its best use case is parent-child relations and as such is one of the best tools for the same.  Some of the use cases for this kind of visualization would be folder structure, dependency structure etc.

This article covers one of the ways to implement the tree graph in UI5 using D3 charts.As the tree graph is not directly available in the standard library of UI it needs to be implemented as a custom control.

Generation of the graph is done with the standard d3 library which comes bundled with UI5.

The idea here is to add a canvas element to the view and custom controls to manipulate the same. D3 controls will be part of this custom control.

In the example below, we will create a simple Master Detail page with the graph.

Tree 9476402

The basic structure of the project will be as given below.

The tree implementation is taken from  Interactive d3.js tree diagram

The whole idea is to create a custom control.

InteractiveTest.view.xml: This is the basic control view. The canvas will be added here using a sap.m.commons.FlexBox.

Flex 4708583

InteractiveTest.controller.js: This is the controller file which will have the chart placed on the canvas.

InteractiveRelationChart.js: The file that contains the logic to construct the tree.

renderer(): Method that inserts the canvas.

Renderer 8983515

onAfterRendering(): The structure of the data is as given below which can be replaced by a rest call

Also, in this method, you have control to the canvas element and you can add the graph controls here.Since now you have the ID for the element you can manipulate the element using any other library like jQuery.

The basic working code can be found here.

References :