专栏首页程序员小灰如何让数据结构可视化?

如何让数据结构可视化?

当我们实现一个比较复杂的数据结构,比如二叉树、图、跳表,Debug的时候怎么验证自己写的函数对不对呢?

一个方法是将数据结构可视化,与理论上的结果比较即可。

请出主角:Graphviz,带一种解释语言dot,可以用简明的代码作图。 之所以推荐这个是因为它可以自动排版

1. 安装

官网下载链接[1]:http://www.graphviz.org/download/

作者系统为win10,其他操作系统应该大同小异。 安装时需要勾选添加环境变量

添加环境变量

2. 渲染

有vscode的读者可以安装一个vscode插件:

安装vscode插件

安装完成后,新建一个.dot文件,右上角会出现一个渲染按钮:

渲染按钮 没有vscode的读者可以使用命令手动渲染:

dot -Tpng 你的代码文件名 -o 输出图片文件名

3. 编写代码

一个空的dot代码(什么都不渲染):

digraph {
}

四个样例渲染效果

如图左上,可以使用下面代码,来创建一个名字为a的结点

digraph {
  a
}

如图左下,通过label的修改可以改动结点显示的文字。 如图右上,通过style = "dotted"可以让其外侧圈边成虚线(可以用来显示NULL结点) 代码中的引号疑似不是必须的,建议保留。

digraph {
    a[label = "文字", style = "dotted"]
}

通过结点名称 -> 结点名称来创建一条线。 同理也可以使用dotted,(虚线用于连接NULL结点)。 这个taillabel可以在靠近第一个结点处显示一个数值(可用于显示结点中的一个数值)

digraph {
    node1[label = "A"]
    node2[label = "B"]
    node1 -> node2[style = dotted, taillabel = "0"]
}

tips:建议将结点的数据,也就是value,拿到node[label = ]中显示,最突出、显眼。

4. 坑

3.4.1 NULL补位

NULL,空指针,在C++中被定义为0 一个正常结点缺失左或右子结点时,会使用NULL指针来填补空缺。

正是因为其自动排版的功能,会导致一些坑。 举个例子,我们要画一个这样的二叉树:

    1
    |
 -------
|       |
0    没有右孩子(NULL结点)

因为我们不能使用开头为数字作为变量名,所以我们的命名规则为:n + 数字

绘画效果:

NULL结点补位

我们发现,如果不使用一个结点NULL来补位,树被拉成了一个链。 我们只需要使用一层NULL结点来补位,这样结构就渲染正常了。

3.4.2 命名

两个结点名字相同,会被判定为一个结点:

结点名称相同

虽然这种情况在二叉搜索树中不存在,但是这里还是提一下。

怎么区分不同的结点呢?我们可以通过C++程序中结点的指针来命名。 结点名称:n + 指针 即使两个结点存储内容相同,但是在电脑中的内存地址一定不同。

但是NULL结点都会被命名为n0,无法区分,怎么办呢? 我这里使用的解决方法:NULL结点命名规则为n + 叶子结点指针 + 是左子结点还是右子结点

AVL样例

3.5 代码

这个代码是基于Part 1中结点的定义来实现的。

void DEBUG() { // 使用了part 2中的软件来绘图,调试神器
    FILE *fp = NULL;
    fp = fopen("./output.dot", "w"); // ./output.dot 为输出的文件名
    fprintf(fp, "digraph {\n");

    deque<node*> q; // 前序遍历,使用队列实现
    node *current;
    q.push_back(root);
    while (!q.empty()) {
        current = q.front();
        q.pop_front();
        if (current == NULL) {
            continue;
        }
        fprintf(fp, "\tn%d[label = \"%d\"]\n", current, current->value);
        for (int i = 0; i < 2; ++i) {
            if (current->child[i]) {
                fprintf(fp, "\tn%d -> n%d[style = blod]\n", current, current->child[i]);
                q.push_back(current->child[i]);
            } else {
                fprintf(fp, "\tnull%d%d[label = \"NULL\", style = dotted]\n", current, i);
                fprintf(fp, "\tn%d -> null%d%d[style = dotted]\n", current, current, i);
            }
        }
    }
    fprintf(fp, "}");
    fclose(fp);
}

参考资料

[1]

官网下载链接: http://www.graphviz.org/download/

本文分享自微信公众号 - 程序员小灰(chengxuyuanxiaohui),作者:Cat-shao

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化专家教你如何让数据栩栩如生

    ? 数据可视化,数据是本质。 其产生与兴起,一方面是由于人们有着对数据的各种对比、趋势、关联等等的诉求;另外一方面,人是视觉动物,对于大量的原始数据不敏感,...

    腾讯NEXT学位
  • 如何用Power BI可视化数据?

    销售数据表记录了咖啡订单,包括字段:订单编号、订日期、门店、产品ID、顾客、数量。

    猴子数据分析
  • 【数据可视化专题】数据可视化:前端数据之美如何展示?

    随着 web 技术的蓬勃发展,前端的展示、交互越来越复杂,在用户的访问、操作过程中产生了大量的数据。由此,前端的数据分析也变得尤为重要。当然,对于站长来说,你可...

    小莹莹
  • 如何可视化和理解MongoDB数据

    为应用程序选择数据库可能是一个真正的挑战。不同的数据库设计服务于不同的目的,在这种情况下,由于他们的僵化模式和对数据类型的约束,关系数据库不能完全满足开发人员的...

    liuxuewen
  • 再谈可视化:如何展示数据

    如何来展现的你的数据?是你有时不得不去思考的一个问题。不同的展示方法,其效果往往差异巨大。这里我将结合近期的一些阅读和实践,试图给出一些方法,希望能帮助到你。

    用户5548425
  • 让流动的数据结构化

    结构化数据加上一个支持schema变更的存储,加上一个高效易用的支持SQL的数据处理和查询的引擎,简直无所不能和极度高效。

    用户2936994
  • 如何将结构化数据导入Solr

    原文地址:https://dzone.com/articles/how-to-import-structured-data-into-solr

    Steve Wang
  • 数据可视化之总结

    Peter Lu
  • 【数据可视化】让效率“爆表”的49个数据可视化工具

    工欲善其事,必先利其器。好的工具可以大大提升你的工作效率,并获得身边人的羡慕和赞赏。今天,我们就来向小伙伴们分享一大波非常实用的工具,武装你的大脑。 ▲图表类...

    陆勤_数据人网
  • 利用grafana让mysql数据可视化

    首先安装好mysql,数据写入到mysql之中。打开Navicat确认mysql服务开启,我本地的数据如下图:

    用户1696846
  • 遇见大数据可视化 : 【云图】让数据可见

    今天,即使你不熟悉云计算,大数据是什么。但是这些词汇已经充斥在我们的身边。我们被超负荷的信息和过多的数据折磨。谁没被定义成数字?

    腾讯大数据可视化设计团队
  • 17款可视化工具,让你的数据美如画

    想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。并不是所有的工具都适合你...

    钱塘数据
  • 17款可视化工具,让你的数据美如画

    作者:科技互联 想让数据变得更好看?不必成为经验丰富的数据科学家,也不必成为平面设计师。 有一些能让数据从简单的表格变成多种多样的图形,地图甚至词“云”。 并不...

    钱塘数据
  • 如何实时可视化渲染你的数据?

    在之前介绍PyQtGraph的文章中,我们都是一次性的获取数据并将其绘制为图形。然而在很多场景中,我们都需要对实时的数据进行图形化展示。

    龙哥
  • 【案例】10个数据可视化案例,让您更懂可视化

    小编邀请您,先思考: 1 如何选择正确的图标视觉化数据?有哪些经验教训? 数据可视化,是一种用来将复杂信息数据清晰表述出来的强大有力的工具。通过可视化信息,我们...

    陆勤_数据人网
  • 数据可视化经典案例|让数据说话

    今天跟大家分享一个经典的数据可视化案例! 案例的主角是汉斯.罗斯林(Hans Rosling)教授。 它是卡罗琳学院的国际卫生学教授,并担任Gapminder基...

    数据小磨坊
  • 可视化分析工具大集合,让数据美如画

    导读:大数据时代,得数据者得天下。巧妇难为无米炊,拥有数据却不知道如何利用,就不能体现数据的价值。而数据可视化作为处理数据的重要步骤,一直被广泛应用。冷冰冰的数...

    钱塘数据
  • 这套前端可视化框架,让数据栩栩如生!

    随着大数据的发展,人们越来越多地使用数据分析来解决问题。为了提高数据分析的效率,各种先进的数据可视化工具应需而生,可以直接根据指定的数据源,生成炫酷又直观的图表...

    程序员鱼皮
  • 独家 | AutoVis大数据可视化设计框架:让大数据可视化容易点

    本文从大数据应用出发,讨论数据可视化在大数据时代所面临的一系列挑战,并重点介绍AutoVis针对这些挑战所做尝试及其体系架构、关键技术和功能特点。

    数据派THU

扫码关注云+社区

领取腾讯云代金券