لعرض رسم بياني بشكل مرئي، يجب تعيين موقع لكل قمة. قدم القسم السابق كيفية تصميم رسم بياني باستخدام واجهة Graph، وفئة AbstractGraph، وفئة UnweightedGraph. يناقش هذا القسم كيفية عرض الرسوم البيانية بيانياً. لعرض رسم بياني، عليك معرفة مكان عرض كل قمة واسم كل قمة. لضمان إمكانية عرض الرسم البياني، نحدد واجهة تسمى Displayable تحتوي على طرق للحصول على إحداثيات x- وy- وأسمائها، و قم بإنشاء مثيلات القمم لـ Displayable، في الكود أدناه.

يمكن الآن عرض رسم بياني ذو رؤوس قابلة للعرض في جزء يسمى GraphView، كما هو موضح في الكود أدناه.

لعرض رسم بياني على جزء، ما عليك سوى إنشاء مثيل لـ GraphView عن طريق تمرير الرسم البياني كوسيطة في المنشئ (السطر 9). يجب أن تقوم فئة قمة الرسم البياني بتنفيذ الواجهة القابلة للعرض من أجل عرض القمم (السطور 13-22). لكل فهرس قمة i، يؤدي استدعاء graph.getNeighbors(i) إلى إرجاع قائمة الجوار الخاصة به (السطر 26). من هذه القائمة، يمكنك العثور على جميع القمم المجاورة لـ i ورسم خط لتوصيل i مع قمته المجاورة (السطور 27-34).

الكود أدناه يعطي مثالاً لعرض الرسم البياني في الشكل أعلاه، كما هو موضح في الشكل أدناه.

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;
        }
    }
}

تم تعريف الفئة المدينة لنمذجة القمم بإحداثياتها وأسمائها (السطور 39-63). يقوم البرنامج بإنشاء رسم بياني برؤوس نوع المدينة (السطر 30). نظرًا لأن City تنفذ Displayable، فإن كائن GraphView الذي تم إنشاؤه للرسم البياني يعرض الرسم البياني في الجزء (السطر 33).