」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 圖形視覺化

圖形視覺化

發佈於2024-08-18
瀏覽:246

為了直觀地顯示圖形,必須為每個頂點分配一個位置。上一節介紹如何使用 Graph 介面、AbstractGraph 類別和 UnweightedGraph 類別對圖進行建模。本節討論如何以圖形方式顯示圖表。為了顯示圖形,您需要知道每個頂點的顯示位置以及每個頂點的名稱。為了確保圖形可以顯示,我們定義了一個名為Displayable 的接口,它具有獲取x-y- 坐標及其名稱的方法,以及在下面的程式碼中建立Displayable 的頂點實例。

Graph Visualization

具有可顯示頂點的圖形現在可以顯示在名為GraphView的窗格上,如下面的程式碼所示。

Graph Visualization

要在窗格上顯示圖形,只需透過將圖形作為建構函式中的參數傳遞來建立 GraphView 的實例(第 9 行)。圖頂點的類別必須實作 Displayable 介面才能顯示頂點(第 13-22 行)。對於每個頂點索引 i,呼叫 graph.getNeighbors(i) 傳回其鄰接清單(第 26 行)。從此清單中,您可以找到與 i 相鄰的所有頂點,並繪製一條線將 i 與其相鄰頂點連接起來(第 27-34 行)。

Graph Visualization

下面的程式碼給出了顯示上圖圖形的範例,如下圖所示。

Graph Visualization

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

類別 City 被定義為以頂點的座標和名稱來建模(第 39-63 行)。此程式建立一個具有 City 類型頂點的圖形(第 30 行)。由於 City 實作了 Displayable,為圖形建立的 GraphView 物件在窗格中顯示圖形(第 33 行)。

版本聲明 本文轉載於:https://dev.to/paulike/graph-visualization-3p9l?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 僅使用 Python 建構前端
    僅使用 Python 建構前端
    對於專注於後端的開發人員來說,前端開發可能是一項艱鉅的、甚至是噩夢般的任務。在我職業生涯的早期,前端和後端之間的界線是模糊的,每個人都被期望能夠處理這兩者。 CSS,尤其是,是一場持續不斷的鬥爭;這感覺像是一個不可能的任務。 雖然我喜歡前端工作,但 CSS 對我來說仍然是一個複雜的挑戰,特別是因為...
    程式設計 發佈於2024-11-05
  • 如何在 Laravel 中執行 Cron 作業
    如何在 Laravel 中執行 Cron 作業
    在本教程中,我將向您展示如何在 Laravel 中運行 cron 作業,但最重要的是,我們會讓事情對我們的學生來說簡單易行。在建立 Laravel 應用程式時,我們將探索如何在您自己的電腦上設定和執行這些自動化任務。 首先,什麼是 cron 作業?將其視為您網站的私人助理 - 一個從不睡覺並且總是...
    程式設計 發佈於2024-11-05
  • 填滿如何影響內聯元素的間距以及如何解決衝突?
    填滿如何影響內聯元素的間距以及如何解決衝突?
    內聯元素上的填充:效果和限制內聯元素上的填充:效果和限制根據源碼,在內聯元素的頂部和底部添加內邊距並不影響周圍元素的間距。然而,「填充將與其他內聯元素重疊」這一說法表明,在某些特定情況下,填充確實會產生影響。 了解重疊填充填充主要影響它應用於的元素,增加其垂直邊框。在正常情況下,這不會導致與相鄰的內...
    程式設計 發佈於2024-11-05
  • Django 基於類別的視圖變得簡單
    Django 基於類別的視圖變得簡單
    眾所周知,django在開發Web應用程式時使用MVT(模型-視圖-模板)進行設計。 View 本身是一個可呼叫的,它接受請求並回傳回應。它不僅僅是一個函數,因為 Django 提供了一種稱為「基於類別的視圖」的東西,因此開發人員可以使用基於類別的方法或您可以說 OOP 方法來編寫視圖。這個基於類...
    程式設計 發佈於2024-11-05
  • 使用 VAKX 建立您的無程式碼 AI 代理
    使用 VAKX 建立您的無程式碼 AI 代理
    If you’ve been keeping up with the AI space, you already know that AI agents are becoming a game-changer in the world of automation and customer inter...
    程式設計 發佈於2024-11-05
  • 這裡是我如何在 jQuery Datatable 中實作基於遊標的分頁。
    這裡是我如何在 jQuery Datatable 中實作基於遊標的分頁。
    在 Web 應用程式中處理大型資料集時,分頁對於效能和使用者體驗至關重要。標準的基於偏移量的分頁(通常與資料表一起使用)對於大型資料集可能效率低。 基於遊標的分頁提供了一種效能更高的替代方案,特別是在處理即時更新或大量資料載入時。在本文中,我將引導您了解如何在 jQuery DataTable 中...
    程式設計 發佈於2024-11-05
  • 為什麼同步引擎可能是 Web 應用程式的未來
    為什麼同步引擎可能是 Web 應用程式的未來
    在不断发展的 Web 应用程序世界中,效率、可扩展性和无缝实时体验至关重要。传统的 Web 架构严重依赖于客户端-服务器模型,这些模型可能难以满足现代对响应能力和同步的需求。这就是同步引擎发挥作用的地方,它为开发人员当今面临的许多挑战提供了一个有前途的解决方案。但同步引擎到底是什么?为什么它们可能是...
    程式設計 發佈於2024-11-05
  • Python 電腦視覺簡介(第 1 部分)
    Python 電腦視覺簡介(第 1 部分)
    注意:在这篇文章中,我们将仅使用灰度图像以使其易于理解。 什么是图像? 图像可以被认为是值的矩阵,其中每个值代表像素的强度。图像格式主要分为三种类型: Binary:此格式的图像由值为 0(黑色)和 1(白色)的单个二维矩阵表示。这是最简单的图像表示形式。 Grey-Scale:在此...
    程式設計 發佈於2024-11-05
  • 網站 HTML 程式碼
    網站 HTML 程式碼
    我一直在嘗試建立一個與航空公司相關的網站。我只是想確認我是否可以使用人工智慧生成程式碼來產生整個網站。 HTML 網站是否相容於博客,或者我應該使用 JavaScript?這是我用作演示的程式碼。 <!DOCTYPE html> <html lang="en">[](url...
    程式設計 發佈於2024-11-05
  • 像程式設計師一樣思考:學習 Java 基礎知識
    像程式設計師一樣思考:學習 Java 基礎知識
    本文介紹了 Java 程式設計的基本概念和結構。它首先介紹了變數和資料類型,然後討論了操作符和表達式,以及控制流程。其次,它解釋了方法和類,然後介紹了輸入和輸出操作。最後,本文透過一個工資計算器的實際範例展示了這些概念的應用。 像程式設計師一樣思考:掌握Java 基礎1. 變數與資料型別 ]Java...
    程式設計 發佈於2024-11-05
  • PHP GD 可以比較兩個影像的相似性嗎?
    PHP GD 可以比較兩個影像的相似性嗎?
    PHP GD 可以確定兩個影像的相似度嗎? 正在考慮的問題詢問是否可以使用以下命令確定兩個圖像是否相同PHP GD 通過比較它們的差異。這需要獲取兩個影像之間的差異並確定它是否完全由白色(或任何統一的顏色)組成。 根據所提供的答案,雜湊函數(如其他回應所建議的)不適用於此情境。比較必須涉及圖像內容而...
    程式設計 發佈於2024-11-05
  • 使用這些鍵編寫進階測試(JavaScript 中的測試需求)
    使用這些鍵編寫進階測試(JavaScript 中的測試需求)
    在本文中,您將學習每個高級開發人員都應該了解的 12 個測試最佳實踐。您將看到 Kent Beck 的文章“Test Desiderata”的真實 JavaScript 範例,因為他的文章是用 Ruby 編寫的。 這些屬性旨在幫助您編寫更好的測試。了解它們還可以幫助您在下一次工作面試中取得好成績。...
    程式設計 發佈於2024-11-05
  • 透過將 matlab/octave 演算法移植到 C 來實現 AEC 的最佳解決方案
    透過將 matlab/octave 演算法移植到 C 來實現 AEC 的最佳解決方案
    完畢!對自己有點印象。 我們的產品需要迴聲消除功能,確定了三種可能的技術方案, 1)利用MCU偵測audio out和audio in的音訊訊號,編寫演算法計算兩側聲音訊號的強度,根據audio out和audio in的強弱在兩個通道之間進行可選的切換,實現半雙工通話效果,但現在市面上都是全雙工...
    程式設計 發佈於2024-11-05
  • 逐步建立網頁:探索 HTML 中的結構和元素
    逐步建立網頁:探索 HTML 中的結構和元素
    ?今天標誌著我軟體開發之旅的關鍵一步! ?我編寫了第一行程式碼,深入研究了 HTML 的本質。涵蓋的元素和標籤。昨天,我探索了建立網站的拳擊技術,今天我透過創建頁眉、頁腳和內容區域等部分將其付諸實踐。我還添加了各種 HTML 元素,包括圖像元素和連結元素,甚至嘗試在單頁網站上進行內部連結。看到這些部...
    程式設計 發佈於2024-11-05
  • 專案創意不一定是獨特的:原因如下
    專案創意不一定是獨特的:原因如下
    在創新領域,存在一個常見的誤解,即專案創意需要具有開創性或完全獨特才有價值。然而,事實並非如此。我們今天使用的許多成功產品與其競爭對手共享一組核心功能。讓他們與眾不同的不一定是想法,而是他們如何執行它、適應用戶需求以及在關鍵領域進行創新。 通訊應用案例:相似但不同 讓我們考慮一下 ...
    程式設計 發佈於2024-11-05

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3