二叉树可视化--Graphviz

vue+vis 图中的节点和线都是可以拖动的哦,在graphViz.vue的代码里面,有很多参数可以改动,可以自己改动试试看。(1)为vis创建一个单独的.vue文件,vue文件名命名必须是驼峰命名法,要不然会报错。1.搭建好vue后,可以使用npm run vis-network 下载 vis插件。(2)graphViz.vue文件具体代码如下,我的节点比较多,可以自己删一下。2.下载好之后,可以在package.json中看见依赖更新。上图就是展示的结果,在想要的位置进行展示。以上就是单独创建vis组建的代码。 阅读详情

大家平时写C程序有没有种把内存里的数据结构全给画出来的冲动呢?数据量小的话,画起来还蛮简单,用viso,我前面的文章都用viso画的。之前写红黑树代码的时候,用的是命令行把整个树打印出来,不过只是一些小片段,很丑,还得自己手动再在纸上画一遍,非常麻烦,要是用程序就能把图画出来那就爽了。好了,推荐使用 Graphviz这个东东,so 一下就知道啦,功能挺丰富的,也提供了很多库(c,php,python等),下面画一颗简单的红黑树(红黑树代码参考我前面的代码,下面只写画树的代码)直接看效果图:



这树怎么画的呢?参考官网 http://www.graphviz.org/Documentation.php

1.编写规则文件(可以用Graphviz自带的lib,如cgraph等生成,或者直接就用fprintf生成,可以简单看下中文的翻译 简单的dot规则)

2.用Graphviz自带的一些工具例如dot等解析一下规则文件,然后生成图片(ps,jpg,png等)或者其它格式的文件。


下面是实现。

t.c//测试代码,用到的函数参考我前面写的红黑树文章的代码。

void rbtree_fprint_node(rbtree_node * t,FILE *fp){
        if(t->color == RB_BLACK){
                fprintf(fp,"node[shape=record,style=filled,color=black,fontcolor=white];\n");
        }else{
                fprintf(fp,"node[shape=record,style=filled,color=red,fontcolor=white];\n");
        }
        fprintf(fp,"%d[label=\"<f0> | <f1> %d | <f2> \"];\n",t->key.value,t->key.value);
}
void rbtree_fprint_tree(rbtree_node * t,FILE *fp){
        if(rb_nil == t) return;
        if(t->parent ==  rb_nil){//root
                rbtree_fprint_node(t,fp);
        }

        if(t->left != rb_nil){
                rbtree_fprint_node(t->left,fp);
                fprintf(fp,"%d:f0:sw->%d:f1;\n",t->key.value,t->left->key.value);
        }
        if(t->right != rb_nil){
                rbtree_fprint_node(t->right,fp);
                fprintf(fp,"%d:f2:se->%d:f1;\n",t->key.value,t->right->key.value);
        }
        rbtree_fprint_tree(t->left,fp);
        rbtree_fprint_tree(t->right,fp);
}
int main(int argc,char *argv[]){
        rbtree_node *t,*p,*max,*min;
        int arr[] = {9,8,11,18,2,5,16,1,7,999,234,7662,387,928,454};
        int i;
        rbtree_init_nil();
        t = rbtree_create(15);
        t->color = RB_BLACK;
        for(i=0;i<15;i++){
                rbtree_add(&t,arr[i]);
        }
        //rb tree print
        FILE *fp;
        fp = fopen("g2.dot","w+");
        fprintf(fp,"digraph G{\n");
        rbtree_fprint_tree(t,fp);
        fprintf(fp,"}");
        fclose(fp);
}

最终生成的是 一个  dot文件,dot文件的语法上官网查,并不是很复杂。

digraph G{
node[shape=record,style=filled,color=black,fontcolor=white];
9[label="<f0> | <f1> 9 | <f2> "];
node[shape=record,style=filled,color=black,fontcolor=white];
5[label="<f0> | <f1> 5 | <f2> "];
9:f0:sw->5:f1;
node[shape=record,style=filled,color=red,fontcolor=white];
18[label="<f0> | <f1> 18 | <f2> "];
9:f2:se->18:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
2[label="<f0> | <f1> 2 | <f2> "];
5:f0:sw->2:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
8[label="<f0> | <f1> 8 | <f2> "];
5:f2:se->8:f1;
node[shape=record,style=filled,color=red,fontcolor=white];
1[label="<f0> | <f1> 1 | <f2> "];
2:f0:sw->1:f1;
node[shape=record,style=filled,color=red,fontcolor=white];
7[label="<f0> | <f1> 7 | <f2> "];
8:f0:sw->7:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
15[label="<f0> | <f1> 15 | <f2> "];
18:f0:sw->15:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
999[label="<f0> | <f1> 999 | <f2> "];
18:f2:se->999:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
11[label="<f0> | <f1> 11 | <f2> "];
15:f0:sw->11:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
16[label="<f0> | <f1> 16 | <f2> "];
15:f2:se->16:f1;
node[shape=record,style=filled,color=red,fontcolor=white];
387[label="<f0> | <f1> 387 | <f2> "];
999:f0:sw->387:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
7662[label="<f0> | <f1> 7662 | <f2> "];
999:f2:se->7662:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
234[label="<f0> | <f1> 234 | <f2> "];
387:f0:sw->234:f1;
node[shape=record,style=filled,color=black,fontcolor=white];
928[label="<f0> | <f1> 928 | <f2> "];
387:f2:se->928:f1;
node[shape=record,style=filled,color=red,fontcolor=white];
454[label="<f0> | <f1> 454 | <f2> "];
928:f0:sw->454:f1;
}







力扣二叉树生成器 最近在刷力扣时遇到了不少跟二叉树有关的题目,每当想要在本地调试的时候,总会苦恼于输入数据的麻烦。遂在网上搜索,竟然没有找到一个合适的轮子。。 于是决定自己写一个二叉树生成器,用力扣测试数据格式的字符串生成一个二叉树以供调试使用。 力扣的测试数据字符串的格式类似于层次遍历,但是包含了一些用于占位的空节点,具体可以自行到力扣找相关题目查看。我的处理方式是把字符串里的所有null都替换成-2147483648(32位有符号数的最小值,即0xF0000000),这... 阅读详情

相关推荐

用Graphviz优化二叉树可视化:解决间距和左右子树区分问题

本文详细介绍了如何使用Graphviz优化二叉树可视化,解决节点间距不合理和左右子树难以区分的问题。通过DOT脚本的高级参数配置,如调整nodesep和ranksep间距参数,以及应用颜色编码和形状差异化技巧,开发者可以创建专业且美观的二叉树图形。文章还提供了实战案例和调试技巧,帮助读者快速掌握Graphviz的高级用法。

weixin_29300931的博客 321

收集到的好的在线工具

数据结构 画“图”的工具,超好用注:可拖动Graph Editor 数据结构 画“树”的工具(感觉没那么好用)注:不可拖动Syntax Tree Generator 另外一个画“树”的在线工具,比上一个好一点,画完全二叉树还不错,但是如果只有一支的话就会很奇怪了。注:不可拖动bitreepainter (hggshiwo.git...

weixin_63294643的博客 2025

二叉树的可视化

在我前面的一篇博文数据结构之红黑树中,提到了数据结构之可视化的重要性。 因为如果我们能将二叉树可视化,也能提高加快调试,减少bug。原文给出了print_tree函数,会打印二叉树,但是旋转了90度,不优美,不友好。最近学习了下Graphviz这个软件,学了下怎么用这个软件绘制图片,基本解决了二叉树的可视化问题。     我还是以我的红黑树代码为例子,写测试代码,看下如何将我们插入产生的

manuscola的专栏 4298

graphviz 绘制二叉树

【代码】graphviz 绘制二叉树。

tyustli 903

算法,请不要这么经典 - 二叉树的可视化

围绕二叉树的算法实在是太多了,以前也总结过一些,但这次决定通过博客的方式,把自己的一些总结和大家分享一下。 首先声明,代码中肯定会参考一些别人的代码,由于是陆陆续续总结的,所以没法给出参考的链接,在此谨表示感谢,如果觉得侵犯了版权,可以给我留言。 由于二叉树相关的算法很多,所以我们将以专辑的方式讨论一下。 在讨论具体算法之前,想想要是能把二叉树打印出来多好啊,看到很多博客上都有很多的图,看起

hp_truth的专栏 3267

画二叉树小工具dtree源码

画二叉树小工具源码。博文链接地址 http://blog.youkuaiyun.com/karizhang

使用 Graphviz 可视化 数组描述的 完全二叉树

原理:对于数组描述的完全二叉树,序号为i的节点的左右儿子分别为2*i和2*i+1,如果它们不超过数组的元素个数heapSize 利用Graphviz 可视化时,在.dot文件中,输入x->y即可画出x到y的一条有向边 tree.dot文件的示例如下: digraph tree{ node [style=filled,color=red]; //设置节点属性 edge [co...

Patience 902

告别手动拖拽!PyQt5/PyQt6 QTableView列宽自适应窗口的三种实战方案(附性能对比)

本文详细介绍了PyQt5/PyQt6中QTableView列宽自适应窗口的三种实战方案,包括Stretch模式、resizeEvent手动计算和ResizeToContents模式,并附有性能对比。帮助开发者解决窗口大小变化时列宽不变的常见问题,提升用户体验和开发效率。

weixin_42538752的博客 231

python 绘图与可视化 Graphviz 二叉树 、 error: Microsoft Visual C++ 14.0 is required

需要对二叉树的构建过程进行可视化,发现了这个Graphviz软件,他对描绘数据间的关系十分擅长。 下载链接:https://graphviz.gitlab.io/_pages/Download/Download_windows.html 安装好后需要把安装路径添加到Path中 下载python的插件graphviz 问题: 这个没有问题,但是还需要下载一个pygraphv...

houpainansheng688的博客 187

Beyond the Spec: Decoding Samsung‘s LPDDR6 Sub-Channel and Wide-NRZ Innovations

本文深入解析了三星LPDDR6内存的两大核心技术:Sub-Channel架构与Wide-NRZ信号技术。Sub-Channel架构通过将物理通道划分为多个独立子通道,实现了内存访问的细粒度控制,大幅提升了能效,尤其适用于AI与边缘计算场景。Wide-NRZ则通过增加并行数据线而非采用PAM4,在提升带宽的同时保持了优异的信号完整性与低功耗特性。

weixin_29209801的博客 134

硬盘dma读写过程

保护模式中,pci上的硬盘dma读写方法

480

Graphviz实战:用DOT语言优化二叉树可视化(附完整代码示例)

本文详细介绍了如何使用Graphviz和DOT语言优化二叉树可视化,包括环境配置、基础语法、核心优化技巧和高级样式定制。通过实战案例和完整代码示例,帮助读者快速掌握专业级二叉树可视化方案,提升算法教学和数据结构演示的效果。

weixin_29250573的博客 212

金蝶个版本下载地址,记得保存收藏。

专业版 V10.0 http://downloads.cmcloud.cn/kis/kis_pro/10.0/kiszybV10sp1.rar V11.0 http://downloads.cmcloud.cn/kis/kis_pro/11.0/KISV11Setup.rar V12.0 http://dow...

饺子的博客 2492

1 python使用networkx或者graphviz,pygraphviz可视化RNN(recursive)中的二叉树

代码地址https://github.com/vijayvee/Recursive-neural-networks-TensorFlow 代码实现的是结构递归神经网络(Recursive NN,注意,不是Recurrent),里面需要构建树。代码写的有不少错误,一步步调试就能解决。主要是随着tensorflow版本的变更,一些函数的使用方式发生了变化。 2 数据样式 (3 (2 (2 The...

weixin_30385925的博客 667

SAP FICO会计凭证过账接口

-------------------------------------增加职能范围-ZHANGZG-2022.09.07 注释掉-2022.09.20。CONCATENATE '总账' ls_doc_item-hkont '要求输入成本对象值!*-------------------------------------增加职能范围-ZHANGZG-2022.09.07。*-------------------------------------增加职能范围-ZHANGZG-2022.09.07。

dingqing86的专栏 1078

飞腾平台(FT2000/4 D2000/8)配置GPIO引脚

飞腾平台配置CPU的引脚为GPIO工作模式的方式有永久型和暂时型: - 永久型是通过UEFI中的MmioWrite32函数来实现的,该方法可以在UEFI阶段就对复用引脚的工作模式配置为GPIO,并且在进入操作系统后仍然不会发生便会; - 临时型是通过rw工具,在系统下手动修改复用引脚的工作模式,该方法在系统重启后会失效,所以是暂时型的。

qq_30135687的博客 5612

java实现二叉树可视化,二叉树的可视化

经常我们创建一个树的时候,我们都希望能直观的看到tree的样子,以确认tree是否正确,要么手画,要么电脑自动生成。那么下面我们就看看如何自动生成一个tree。这里我们要用到一个开源的软件Graphviz ,官网http://www.graphviz.org/安装方法有两种:1. 如果是ubuntu系统,可以直接敲入以下命令sudo apt-get install graphviz2. 直接下载源...

weixin_35662051的博客 999

车辆重识别/再辨识数据集: Vehicle Re-ID Datasets Collection

车辆数据库 1.VERI-Wild: A Large Dataset and a New Method for Vehicle Re-Identification in the Wild (2019-CVPR) 数据库名称:VERI-Wild 论文:链接 数据库描述: 车辆图像由一个包含174个摄像机,拍摄范围覆盖超过200平方公里的市区CCTV系统拍摄。摄像机是24小时连续拍摄30天,其长时间的...

AI炼丹师 6854

如何让数据结构可视化?

当我们实现一个比较复杂的数据结构,比如二叉树、图、跳表,Debug的时候怎么验证自己写的函数对不对呢?一个方法是将数据结构可视化,与理论上的结果比较即可。请出主角:Graphviz,带一种...

程序员小灰的博客 2795

【Bluetooth|蓝牙开发】三、一篇文章,带你总览蓝牙协议

1、开篇词 2、蓝牙开发入门 3、蓝牙协议栈总览 4、蓝牙协议栈——物理层 5、蓝牙协议栈——链路层 6、蓝牙协议栈——传输层 7、蓝牙协议栈——L2CAP协议 8、蓝牙协议栈——ATT协议 9、蓝牙协议栈——GATT协议 10、蓝牙通信流程分析 11、蓝牙协议栈——Bluez交叉编译 12、蓝牙调试工具汇总

Donge's Blog 1万+

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

树的可视化操作

树的可视化操作 如何将建成的树用图片的方式展现出来,在这次课设的时候发现一种方法, 借此来分享一波。 以二叉树为例。 用到的语言: c++,python。 首先,当然是要建好一棵树,顺便复习一下二叉树的构成。 struct TreeNode { int data; struct TreeNode* Left = NULL; struct TreeNode* Right = NULL; }; //这边展现通过前序和中序建立唯一二叉树 TreeNode* traversal(vector<int&

qq_52170197的博客 1187

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

上一篇: 红黑树源码实现
下一篇: 操作系统实践(1)——从引导开始
小灰马
博客等级 码龄17年 55粉丝 42原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值