二叉树可视化--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的博客 319

二叉树小工具dtree源码

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

二叉树可视化

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

manuscola的专栏 4295

收集到的好的在线工具

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

weixin_63294643的博客 2003

graphviz 绘制二叉树

【代码】graphviz 绘制二叉树

tyustli 901

使用 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 898

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的博客 186

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

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

weixin_29250573的博客 206

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的博客 664

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

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

weixin_35662051的博客 997

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

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

hp_truth的专栏 3259

如何让数据结构可视化

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

程序员小灰的博客 2785

树的可视化操作

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

qq_52170197的博客 1182
上一篇: 红黑树源码实现
下一篇: 操作系统实践(1)——从引导开始
小灰马
博客等级 码龄17年 55粉丝 42原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值