What is a Tree Graph and how to visualize it using JointJS+?

A tree graph is a mathematical model representing tree-like structures from the real world. It can represent various hierarchical structures and also some processes and operations. Tree graphs are a powerful tool for various algorithmical problems. Also it is useful now in the field of machine learning and AI.

Tree graphs consist of nodes which are connected in one particular direction with no cycles. In the demo users can construct such a tree in a complex visual way using tools which allow a more smooth experience. Using our powerful library JointJS+ frontend developers can build a convenient UI with a complex visual representation.

The tree graph demo above is written in plain JavaScript, but can be easily integrated using TypeScript or a wide range of web application frameworks such as React, Angular, Vue or Svelte. JointJS+ is a standalone framework-agnostic library and allows integrating with every JavaScript workflow. To see a more complex example on the same topic you can look at our decision tree demo. To check the source code of the demos, start a free 30-day trial of JointJS+.

Integration

Are you interested in implementing tree graph visualization using TypeScript or maybe you are using React, Vue, Angular or Svelte? We are providing full typings for TypeScript and integration examples for stated frameworks. JointJS+ is a flexible JavaScript-first library and its framework-agnostic approach allows easy integration with any JavaScript stack. We can assure that using JointJS+ in your environment would be as smooth as possible.

The tree graph demo application is very simple although it introduces several JointJS+ plugins such as Halo, PaperScroller and TreeLayout. It can be a great starting point for using JointJS+ library!‍

TypeScript Tree Graph

Do you enjoy using TypeScript? We do too! To make possible smooth development of TypeScript applications, JointJS and JointJS+ offer comprehensive type definitions. While our Tree graph demo is currently written in plain JavaScript, it can be easily updated to TypeScript within minutes, ensuring type safety and improved code maintainability.

React Tree Graph

When it comes to React, known for its component-based architecture and efficient rendering, integrating JointJS+ into React applications is remarkably easy. While the current demo can be implemented using a single component, the modular nature of JointJS+ allows functionality separation even on a smaller level. The agnostic nature of JointJS makes sure that the library can be easily integrated into any React app. Here is what part of such an app can look like:

-- CODE language-js --
import { useEffect } from 'react';
import { dia, layout, ui } from '@clientio/rappid';

const TreeGraphApp = () => {
    const scrollerContainer = useRef(null);
    //...
    useEffect(() => {
        const graph = new dia.Graph();
        const paper = new dia.Paper({
            model: graph,
            //...
        });
        const scroller = new ui.PaperScroller({
            paper,
            //...
        });
        scrollerContainer.current.appendChild(scroller.el);

        const tree = new layout.TreeLayout({ graph: graph });
        tree.layout();
        //...
        return () => {
            scroller.remove();
            paper.remove();
        };
    }, []);
    //...

    return (
        <div className="scrollerContainer" ref={scrollerContainer}/>
    );
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your React application? Follow our tutorial on React and JointJS+ integration. For more examples, check out our Github repository.

Vue Tree Graph

Similarly, Vue, with its intuitive and reactive nature, harmoniously integrates with JointJS+. By leveraging Vue's declarative syntax and component-based approach, developers can seamlessly render tree graphs into their Vue applications. This integration allows developers to build highly interactive and responsive interfaces, enabling users to visualize and comprehend complex tree structures without an effort. Integration with JointJS+ will be a smooth journey.

-- CODE language-js --
<template>
    <div id="tree-app" ref="scrollerContainer"></div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { dia, layout, ui } from '@clientio/rappid';

@Options({})
export default class TreeGraphApp extends Vue {
    declare public $refs: {
        scrollerContainer: HTMLDivElement;
    }
    private graph: dia.Graph;
    private paper: dia.Paper;
    private scroller: ui.PaperScroller;
    //...
    public created(): void {
        const graph = this.graph = new dia.Graph();
        const paper = this.paper = new dia.Paper({
            model: graph,
            //...
        });
        const scroller = this.scroller = new ui.PaperScroller({
            paper,
            //...
        });
        const tree = new layout.TreeLayout({ graph: graph });
        tree.layout();
        //...
    }

    public mounted(): void {
        const { scroller, paper, $refs : { scrollerContainer } } = this;
        scrollerContainer.appendChild(this.scroller.el);
        //...
    }
    //...
}
</script>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ with your Vue application? Follow our tutorial on Vue and JointJS+ integration. For more examples, check out our Github repository.

Angular Tree Graph

Angular, with its comprehensive framework and extensive toolset for modular development, provides excellent integration possibilities for JointJS+. Using Angular’s modular nature and rich dependency injection features, the tree graph demo can be easily transformed into a robust Angular application. Components and services can provide a strong backbone for JointJS+ plugins. Here is the example of how you can set up an Angular app which will recreate Tree graph demo using Tree Layout plugin:

-- CODE language-js --
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { dia, layout, ui } from '@clientio/rappid';

@Component({
    selector: 'app-root',
    templateUrl: './tree-graph.component.html',
    styleUrls: ['./tree-graph.component.scss']
})
export class TreeGraphApp implements OnInit, AfterViewInit {
    @ViewChild('scrollerContainer') scrollerContainer: ElementRef;
    private graph: dia.Graph;
    private paper: dia.Paper;
    private scroller: ui.PaperScroller;
    //...
    ngOnInit() {
        const graph = this.graph = new dia.Graph();
        const paper = this.paper = new dia.Paper({
            model: graph,
            //...
        });

        const scroller = this.scroller = new ui.PaperScroller({
            paper,
            //...
        });
        scroller.render();

        const tree = new layout.TreeLayout({ graph: graph });
        tree.layout();

        //...
    }

    public ngAfterViewInit(): void {
        const { scroller, paper, scrollerContainer } = this;
        scrollerContainer.nativeElement.appendChild(this.scroller.el);
        //...
    }
    //...
}

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Angular application? Follow our tutorial on Angular and JointJS+ integration. For more examples, check out our Github repository.

Svelte Tree Graph

Additionally, JointJS+ can be easily integrated with Svelte, the lightweight and reactive framework. With its compiler-based approach, Svelte allows developers to generate efficient optimized code in a declarative manner, resulting in high performance and responsive applications. You can swiftly create a tree graph app using our integration guides. Using JointJS+ and Svelte you can build fascinating visualizations for your needs.

-- CODE language-js --
<script lang="ts">
    import { onMount } from 'svelte';
    import { dia, layout, ui } from '@clientio/rappid';
    import '../node_modules/@clientio/rappid/rappid.css';

    let ref;

    onMount(() => {
        const graph = new dia.Graph();
        const paper = new dia.Paper({
            model: graph,
            //...
        });
        const scroller = new ui.PaperScroller({
            paper,
            //...
        });

        ref.appendChild(scroller.el);
        scroller.render().center();

        const tree = new layout.TreeLayout({ graph: graph });
        tree.layout();
        //...
    });
</script>

<main bind:this={ref} class="tree-graph-app"></main>

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Svelte application? Follow our tutorial on Svelte and JointJS+ integration. For more examples, check out our Github repository.

Salesforce Lightning Tree Graph

As a standalone agnostic JavaScript library, JointJS+ allows possible integration with any JavaScript workflow including Salesforce Lightning. Using JointJS+ you can build visually appealing tree graph applications in your Salesforce Lightning environment.

🔗 Interested in a step-by-step guide on how to integrate JointJS+ into your Lightning application? Follow our tutorial on Lightning and JointJS+ integration.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use features and demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial to check their source code and develop your next application with ease and confidence.