Is there a Way to have a hierarchical graph layout like vis.js in JavaFX?

Question

Hello I am looking for a way to implement a hierarchical graph in JavaFX, as is the case with a company organization.

Ideally, the graph should be in a scrollable pane and the individual nodes of the graph should be able to be displayed (in a different pane) in order to get more information about an employee, etc. The whole thing runs over a database with a UUID system. I've heard of yfiles, VisFX and GraphViz, but somehow it didn't quite work with these methods, as I had imagined.

Is there any API that could help me with my problem?

score 1 · Answer 1 · answered Jan 07 '21 at 11:46

1

That depends on what you mean by "graph". If a tree view is sufficient, you can use a JavaFX Tree control to display the hierarchical graph - like a directory structure in an explorer window. If a TreeView is not sufficient, you will have to implement some control yourself.

If the information for each node in the graph can fit on a single line of one or more columns, you can also use a JavaFX TreeTableView.

answered Jan 07 '21 at 11:46

Jakob Jenkov

319
1
2
12

thx so much to add this but i had tree view / TreeTableView tested and it does not fit that much ... by graph i imagine a collapible tree like this: https://live.yworks.com/demos/complete/collapse/index.html – MrWho Jan 07 '21 at 12:33
Hmm... okay... then I don't know of any pre-made control that can help you with that. You might have to create it yourself. – Jakob Jenkov Jan 07 '21 at 12:57
that yworks example is available for JavaFX: https://www.yworks.com/products/yfiles-for-javafx – Frank Jan 07 '21 at 15:31
Yworks is not helpful even in test version it was not working the way I thought it would – MrWho Jan 11 '21 at 09:12
seems like i have do it for myself and i don't know how – MrWho Jan 13 '21 at 07:52

score 0 · Answer 2 · answered Jan 14 '21 at 13:23

I found this: Graph Visualisation (like yFiles) in JavaFX and changed some code and finaly endet up with this:

code i changed in the main:

package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

import java.awt.Dimension;

import com.fxgraph.graph.CellType;
import com.fxgraph.graph.Graph;
import com.fxgraph.graph.Model;
import com.fxgraph.layout.base.Layout;
import com.fxgraph.layout.random.RandomLayout;

public class Main extends Application {

    Graph graph = new Graph();

    @Override
    public void start(Stage primaryStage) {
        
        Dimension screenSize = java.awt.Toolkit.getDefaultToolkit().getScreenSize();
        double width = screenSize.getWidth();
        double height = screenSize.getHeight();
        
        BorderPane root = new BorderPane();
        
        Pane rightPane = new Pane();
        
        rightPane.setPrefWidth(width *  0.4);
        rightPane.setPrefHeight(height);
        
        Label infLbl = new Label("Infos");
        
        infLbl.setStyle("-fx-font: 30 arial; -fx-text-fill: red; -fx-font-weight: bold;");
        
        infLbl.setLayoutX(rightPane.getPrefWidth() * 0.1);
        infLbl.setLayoutY(rightPane.getPrefHeight() * 0.1);
        
      
        rightPane.getChildren().add(infLbl);
        

        graph = new Graph();

        ScrollPane scroll = graph.getScrollPane();
        // scroll.setMaxWidth(width - width * 0.3);
        
        root.setCenter(scroll);
        
        root.setRight(rightPane);

        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setWidth(width);
        
        primaryStage.setHeight(height);

        primaryStage.setScene(scene);
        primaryStage.show();

        addGraphComponents();

        Layout layout = new RandomLayout(graph);
        layout.execute();

    }

    private void addGraphComponents() {

        Model model = graph.getModel();

        graph.beginUpdate();

        model.addCell("Cell A", CellType.RECTANGLE);
        model.addCell("Cell B", CellType.RECTANGLE);
        model.addCell("Cell C", CellType.RECTANGLE);
        model.addCell("Cell D", CellType.TRIANGLE);
        model.addCell("Cell E", CellType.TRIANGLE);
        model.addCell("Cell F", CellType.RECTANGLE);
        model.addCell("Cell G", CellType.RECTANGLE);

        model.addEdge("Cell A", "Cell B");
        model.addEdge("Cell A", "Cell C");
        model.addEdge("Cell B", "Cell C");
        model.addEdge("Cell C", "Cell D");
        model.addEdge("Cell B", "Cell E");
        model.addEdge("Cell D", "Cell F");
        model.addEdge("Cell D", "Cell G");

        graph.endUpdate();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

and some changes in the RectangleCell class:

package com.fxgraph.cells;

import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

import com.fxgraph.graph.Cell;

public class RectangleCell extends Cell {

    public RectangleCell( String id) {
        super( id);

        Rectangle view = new Rectangle( 50,50);

        view.setStroke(Color.DODGERBLUE);
        view.setFill(Color.DODGERBLUE);
        
        Label lbl = new Label(id);
        //lbl.setClip(view);
        lbl.setLabelFor(view);
        
        StackPane stack = new StackPane();
        stack.getChildren().addAll(view, lbl);
        
        setView(stack);

    }

}

maybe there is a way to add an hierarchical layout to this and can save a spot with id for the rectangle so that it could look like this (ids not shown in the final application):

Is there a Way to have a hierarchical graph layout like vis.js in JavaFX?

2 Answers2