在本文中，将向你介绍一个非常棒的小部件egui_graphs，它允许你使用Rust和egui库轻松呈现复杂的网络图。

介绍egui_graphs
Egui_graphs是一个建立在流行的egui库之上的图形可视化实现。该项目即将推出第一个稳定版本，旨在通过提供易于集成、可定制的图形可视化小部件来扩展egui的可视化功能。

egui_graphs的主要特性包括：
1.自定义和交互性。
2.能够绘制任意复杂的图形与自引用，循环等。
3.小部件不修改所提供的图形和属性，而是与应用客户端发生交互的情况下进行更改。

例子
新建一个Rust项目：

cargo new egui_graphs_example

在Cargo.toml文件中加入以下依赖库：

[dependencies]
egui_graphs = "0.0.20"
egui = "0.21.0"
eframe = "0.21.3"

然后在src/main.rs中写入代码：
步骤1：定义ExampleApp结构体
首先，让我们定义ExampleApp结构体，它将保存图形元素和配置。结构体包含一个字段：elements，用于存储图的节点和边。

use egui_graphs::Elements;

pub struct ExampleApp {
    elements: Elements,
}

步骤2：实现new()函数
接下来，为ExampleApp结构体实现new()函数。这个函数使用generate_graph()辅助函数生成图形元素。

use eframe::CreationContext;

impl ExampleApp {
    fn new(_: &CreationContext<'_>) -> Self {
        let elements = generate_graph();
        Self { elements }
    }
}

步骤3：生成图形元素
实现上面代码中的generate_graph()辅助函数，用于初始化图的节点和边。在本例中，我们创建了5个具有独特位置的节点和连接它们的边。

use std::collections::HashMap;
use egui_graphs::{Elements, Node, Edge};

fn generate_graph() -> Elements {
    let mut nodes = HashMap::new();
    nodes.insert(0, Node::new(0, egui::Vec2::new(-50., 0.)));
    nodes.insert(1, Node::new(1, egui::Vec2::new(50., 0.)));
    nodes.insert(2, Node::new(2, egui::Vec2::new(-25., 60.)));
    nodes.insert(3, Node::new(3, egui::Vec2::new(25., 60.)));
    nodes.insert(4, Node::new(4, egui::Vec2::new(0., -30.)));  

    let mut edges = HashMap::new();
    edges.insert((0, 1), vec![Edge::new(0, 1, 0)]);
    edges.insert((1, 2), vec![Edge::new(1, 2, 0)]);
    edges.insert((2, 4), vec![Edge::new(2, 4, 0)]);
    edges.insert((4, 3), vec![Edge::new(4, 3, 0)]);
    edges.insert((3, 0), vec![Edge::new(3, 0, 0)]);  

    edges.insert((2, 0), vec![Edge::new(2, 0, 0)]); 
    edges.insert((0, 4), vec![Edge::new(0, 4, 0)]);
    edges.insert((4, 1), vec![Edge::new(4, 1, 0)]);
    edges.insert((1, 3), vec![Edge::new(1, 3, 0)]);
    edges.insert((3, 2), vec![Edge::new(3, 2, 0)]);      

    Elements::new(nodes, edges)
}

步骤4：实现update()函数
现在，为ExampleApp实现App特征的update()函数。该函数创建一个包含图形元素的GraphView小部件，并使用ui.add()函数将其添加到中央面板。

// 堆代码 duidaima.com
impl App for ExampleApp {
    fn update(&mut self, ctx: &egui::Context, _: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.add(GraphView::new(&self.elements));
        });
    }
}

步骤5：运行应用程序
最后，使用带有指定的native选项和ExampleApp参数的run_native()函数运行应用程序。

fn main() {
    let native_options = eframe::NativeOptions::default();
    run_native(
        "egui_graphs_basic_demo",
        native_options,
        Box::new(|cc| Box::new(ExampleApp::new(cc))),
    )
    .unwrap();
}

执行cargo run，结果如图：

你可以通过修改设置或根据需要添加更多节点和边来进一步定制图的外观和行为。