Tree : Top View

本文介绍了如何解决一道关于二叉树顶部视图的问题。顶部视图是指从树的父节点向下看,可以看到的节点集合。在层序遍历中,通过定义节点的左右子节点位置来确定节点是否可见,从而得到正确的顶部视图。
摘要由CSDN通过智能技术生成

Abstract

做了一道题Tree : Top View。下面是解题报告。

Top View

什么是Top View呢?
在二叉树的父节点,从下看:你能看到的结点的集合即是Top View。
如下图:结点7和13被8挡住了,所以看不到。只能看到 结点4,8,16,20。
在这里插入图片描述
怎么确定结点是否被挡在了呢?如上图的po。我是这样定义的:对与一个结点来说:它的左结点位置为该节点位置减一,右结点的位置为该结点位置加一。然后把根节点的位置设为0。
这样:对树进行遍历:这样就能把树的所有结点的位置确定下来。
这里我选择的是层序遍历:因为其他三种遍历:左数的遍历顺序一定会先于右树。但是层序遍历是一层一层遍历。就好像站队一样,其他三种遍历是直接插入队伍去,这是不对的。



Code:

void topView(Node * root) {
    
        if(root == nullptr)
            return;
        queue<pair<Node*,int
这个是一个子组件 <template> <view> <text class="node" v-html="label"></text> <view class="children"> <tree-node v-for="(child, key) in children" :key="key" :treeData="child" /> </view> </view> </template> <script> export default { name: 'TreeNode', props: { treeData: { type: Object | Array, required: true } }, computed: { label() { return ` <u-row justify="center" gutter="10" style="display: flex;justify-content: center; margin: 10px"> <u-col span="4"></u-col> <u-col span="4"> <view style="color: red; background: orange; border: 1px solid red;padding: 5px;"> id: ${this.treeData.id} </view> </u-col> <u-col span="4"></u-col> </u-row> <u-row justify="center" gutter="10" style="display: flex;justify-content: center;"> <u-col span="4" style="border: 1px solid red; text-align: center; margin: 10rpx;"> <view> extendOne: ${this.treeData.extendOne} </view> </u-col> <u-col span="4" style="border: 1px solid red; text-align: center; margin: 10rpx;"> <view> extendTwo: ${this.treeData.extendTwo}, </view> </u-col> <u-col span="4" style="border: 1px solid red; text-align: center; margin: 10rpx;"> <view> extendThree: ${this.treeData.extendThree} </view> </u-col> </u-row> ` }, children() { const userExtendThree = this.treeData.userExtendThree if (userExtendThree) { return [userExtendThree] } else { return [] } } } } </script> <style lang="scss" scoped> .tree { font-size: 16px; } .node { display: inline-block; margin-right: 10px; padding: 5px; } .children { margin-left: 20px; } </style> 这个是数据结构 { "createBy": "13774", "createTime": "2023-05-22 16:48:21", "updateBy": "13774", "updateTime": "2023-05-22 17:32:17", "remark": null, "id": 13774, "userId": 13774, "extendOne": 13775, "extendTwo": 13776, "extendThree": 13777, "isLeader": null, "extendId": null, "userExtendThree": { "createBy": "", "createTime": null, "updateBy": "", "updateTime": null, "remark": null, "id": 13777, "userId": 13777, "extendOne": 13778, "extendTwo": 13779, "extendThree": 13780, "isLeader": null, "extendId": null, "userExtendThree": null } } 帮我把label()函数里面的css样式进行美化,画成树状结构的,正方形画成圆形。每一层 用 左 右 中 线段展示关系层级
05-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值