Pour afficher visuellement un graphique, chaque sommet doit se voir attribuer un emplacement. La section précédente a présenté comment modéliser un graphique à l'aide de l'interface Graph, de la classe AbstractGraph et de la classe UnweightedGraph. Cette section explique comment afficher les graphiques sous forme graphique. Pour afficher un graphique, vous devez savoir où chaque sommet est affiché et le nom de chaque sommet. Pour garantir qu'un graphique puisse être affiché, nous définissons une interface nommée Displayable qui contient les méthodes permettant d'obtenir les coordonnées x- et y- et leurs noms, et créer des instances de sommets de Displayable, dans le code ci-dessous.

Un graphique avec des sommets Affichables peut désormais être affiché sur un volet nommé GraphView, comme indiqué dans le code ci-dessous.

Pour afficher un graphique sur un volet, créez simplement une instance de GraphView en passant le graphique en argument dans le constructeur (ligne 9). La classe du sommet du graphe doit implémenter l'interface Displayable afin d'afficher les sommets (lignes 13 à 22). Pour chaque index de sommet i, l'appel de graph.getNeighbors(i) renvoie sa liste de contiguïté (ligne 26). Dans cette liste, vous pouvez trouver tous les sommets adjacents à i et tracer une ligne pour connecter i à son sommet adjacent (lignes 27 à 34).

Le code ci-dessous donne un exemple d'affichage du graphique dans la figure ci-dessus, comme le montre la figure ci-dessous.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class DisplayUSMap extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        City[] vertices = {new City("Seattle", 75, 50),
                new City("San Francisco", 50, 210),
                new City("Los Angeles", 75, 275), new City("Denver", 275, 175),
                new City("Kansas City", 400, 245),
                new City("Chicago", 450, 100), new City("Boston", 700, 80),
                new City("New York", 675, 120), new City("Atlanta", 575, 295),
                new City("Miami", 600, 400), new City("Dallas", 408, 325),
                new City("Houston", 450, 360)};

        // Edge array for graph
        int[][] edges = {
                {0, 1}, {0, 3}, {0, 5}, {1, 0}, {1, 2}, {1, 3},
                {2, 1}, {2, 3}, {2, 4}, {2, 10},
                {3, 0}, {3, 1}, {3, 2}, {3, 4}, {3, 5},
                {4, 2}, {4, 3}, {4, 5}, {4, 7}, {4, 8}, {4, 10},
                {5, 0}, {5, 3}, {5, 4}, {5, 6}, {5, 7},
                {6, 5}, {6, 7}, {7, 4}, {7, 5}, {7, 6}, {7, 8},
                {8, 4}, {8, 7}, {8, 9}, {8, 10}, {8, 11},
                {9, 8}, {9, 11}, {10, 2}, {10, 4}, {10, 8}, {10, 11},
                {11, 8}, {11, 9}, {11, 10}
        };

        Graph graph = new UnweightedGraph(vertices, edges);

        // Create a scene and place it in the stage
        Scene scene = new Scene(new GraphView(graph), 750, 450);
        primaryStage.setTitle("DisplayUSMap"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

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

    static class City implements Displayable {
        private int x, y;
        private String name;

        City(String name, int x, int y) {
            this.name = name;
            this.x = x;
            this.y = y;
        }

        @Override
        public int getX() {
            return x;
        }

        @Override
        public int getY() {
            return y;
        }

        @Override
        public String getName() {
            return name;
        }
    }
}

La classe City est définie pour modéliser les sommets avec leurs coordonnées et leurs noms (lignes 39 à 63). Le programme crée un graphe avec les sommets de type City (ligne 30). Étant donné que City implémente Displayable, un objet GraphView créé pour le graphique affiche le graphique dans le volet (ligne 33).