go语言｜数据结构：二叉树可视化（制作svg格式树形图）

已于 2022-09-05 16:21:43 修改
阅读量2.7k 收藏 39
点赞数 45
分类专栏： Golang 文章标签： 数据结构 算法 golang 二叉树 SVG
于 2022-09-04 11:08:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boysoft2002/article/details/126685307
版权

最近一直在刷二叉树题目，但在要验证结果时，通常用中序遍历、层序遍历查看结果，验证起来没有画图来得直观，所有想到自己动手制作二叉树的树形图。 直接开干，先从svg入手：

什么是SVG？

SVG定义

SVG是可伸缩矢量图形 (Scalable Vector Graphics)，于2003年1月14日成为 W3C 推荐标准。

SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG优点

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 图像可在任何的分辨率下被高质量地打印
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 JavaScript 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

预定义元素

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
直线 <line>
文字 <text>
路径 <path>
折线 <polyline>
多边形 <polygon>
... more ... 

制作二叉树的树形图，就使用圆形、直线、文字三种元素即可：

圆形 <circle>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="150" cy="50" r="30" stroke="black" stroke-width="2" fill="orange"/>
</svg>

 cx和cy属性定义圆点的x和y坐标；r属性定义圆的半径
如果省略cx和cy，圆的中心会被设置为(0, 0)

直线 <line>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="50" y1="50" x2="200" y2="200" style="stroke:red;stroke-width:2"/>
</svg>

x1，y1，x2，y2 属性定义线条的直线两端点的坐标

文字 <text>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="30" y="150" fill="red">Welcome to Hann's HomePage</text>
</svg>

x，y 属性定义文字左对齐显示时的起始坐标（居中对齐则是文字中间点）
fill 属性定义文字的颜色

结点SVG格式

根结点

由<circle>和<text>组成，存放结点的数据域

	<g id="0,0">
	<circle cx="400" cy="50" r="30" stroke="black" stroke-width="2" fill="orange" />
	<text x="400" y="50" fill="red" font-size="20" text-anchor="middle" dominant-baseline="middle">1</text>
	</g>

子树结点

比根结点多出<line>元素，用来表示父结点左或右指针的指向

	<g id="1,0">
	<circle cx="200" cy="170" r="30" stroke="black" stroke-width="2" fill="orange" />
	<text x="200" y="170" fill="red" font-size="20" text-anchor="middle" dominant-baseline="middle">2</text>
	<line x1="200" y1="140" x2="379" y2="71" style="stroke:black;stroke-width:2"/>
	</g>

叶结点

与子树结点相同，为区别显示把<circle>填充色改为greenlight

	<g id="1,1">
	<circle cx="600" cy="170" r="30" stroke="black" stroke-width="2" fill="lightgreen" />
	<text x="600" y="170" fill="red" font-size="20" text-anchor="middle" dominant-baseline="middle">3</text>
	<line x1="600" y1="140" x2="421" y2="71" style="stroke:black;stroke-width:2"/>
	</g>

结点坐标

坐标的确定

结点坐标确定，把二叉树还原成满二叉树，结点位置标记为：

[ [0,0], [1,0], [1,1], [2,0], [2,1], [2,2], [2,3], [3,0]......]，再用循环计算出各点坐标。

连线的夹角

实际上不用考虑连线夹角，只要计算出连线始终两端点的坐标即可：

结点文本

以字符串形式保存好属性变量的特征关键词，用于遍历二叉树时替换成实际数据：

func XmlNode(M, N, X, Y int, Data string, Color ...string) string {
	var cColor, tColor string
	R := 30
	Node := `<Tab><g id="M,N">
	<circle cx="X" cy="Y" r="RC" stroke="black" stroke-width="2" fill="COLOR" />
	<text x="X" y="Y" fill="TextColor" font-size="20" text-anchor="middle"
		dominant-baseline="middle">DATA</text>
	<ROOT/>
	</g><CrLf>`
	if len(Color) == 0 {
		cColor, tColor = "orange", "red" //分别圆形背景色，文字颜色
	} else if len(Color) == 1 {
		cColor, tColor = Color[0], "red"
	} else {
		cColor, tColor = Color[0], Color[1]
	}
	Node = strings.Replace(Node, "M", strconv.Itoa(M), 1)
	Node = strings.Replace(Node, "N", strconv.Itoa(N), 1)
	Node = strings.Replace(Node, "X", strconv.Itoa(X), 2)
	Node = strings.Replace(Node, "Y", strconv.Itoa(Y), 2)
	Node = strings.Replace(Node, "RC", strconv.Itoa(R), 1)
	Node = strings.Replace(Node, "DATA", Data, 1)
	Node = strings.Replace(Node, "COLOR", cColor, 1)
	Node = strings.Replace(Node, "TextColor", tColor, 1)
	Node = strings.Replace(Node, "<CrLf>", "\n", -1)
	Node = strings.Replace(Node, "<Tab>", "\t", -1)
	Node = strings.Replace(Node, "\n\t\t", " ", -1)
	return Node
}

二叉树转SVG

遍历二叉树对应的满二叉树，读出数据域并计算坐标，转成svg格式：

二叉树转svg

func (bt *biTree) Xml4Tree() string {
	var Xml, Node string
	Head := "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/" +
		"1999/xlink\" version=\"1.1\" width=\"Width\" height=\"Height\">\nCONTENT</svg>"
	Line := `<line x1="X1" y1="Y1" x2="X2" y2="Y2" style="stroke:black;stroke-width:2"/>`
	Link := `<a xlink:href="https://blog.csdn.net/boysoft2002" target="_blank">
	<text x="5" y="20" fill="blue">Hann's CSDN Homepage</text></a>`
	List := bt.LevelNullwith()
	Levels := len(List)
	for i := Levels - 1; i >= 0; i-- {
		negative := -1
		TmpXml := ""
		for j := 0; j < Pow2(i); j++ {
			t := Pow2(Levels - i - 1)
			x, y := 50*(2*t*j+t), 120*i+50
			if List[i][j] != nil {
				fillColor := "orange"
				if i == Levels-1 || i > 0 && i < Levels-1 &&
					List[i+1][j*2] == nil && List[i+1][j*2+1] == nil {
					fillColor = "lightgreen"
				}
				TmpStr := ""
				switch List[i][j].(type) {
				case int:
					TmpStr = strconv.Itoa(List[i][j].(int))
				case float64:
					TmpStr = strconv.FormatFloat(List[i][j].(float64), 'g', -1, 64)
				case string:
					TmpStr = List[i][j].(string)
				default:
					TmpStr = "Error Type"
				}
				Xml = XmlNode(i, j, x, y, TmpStr, fillColor)
			}
			if i > 0 {
				line1 := strings.Replace(Line, "X1", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y1", strconv.Itoa(y-30), 1)
				negative *= -1
				x0, y0 := 21, 21
				x += 50*negative*(2*t*j%2+t) - negative*x0
				line1 = strings.Replace(line1, "X2", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y2", strconv.Itoa(y-120+y0), 1)
				Xml = strings.Replace(Xml, "<ROOT/>", line1, 1)
			}
			if List[i][j] != nil {
				TmpXml += Xml
			}
		}
		Node = TmpXml + Node
	}
	Xml = strings.Replace(Head, "CONTENT", Node, 1)
	Xml = strings.Replace(Xml, "Width", strconv.Itoa(Pow2(Levels)*50), 1)
	Xml = strings.Replace(Xml, "Height", strconv.Itoa(Levels*120), 1)
	Xml = strings.Replace(Xml, "<ROOT/>", Link, 1)
	return Xml
}

写入文件、调取浏览

要把.svg文件的默认打开方式关联为默认浏览器，否则不显示而是提示是否要下载

    //......
	for index, text := range texts {
		svgFile := "./biTree0" + strconv.Itoa(index+1) + ".svg"
		file, err1 = os.Create(svgFile)
		if err1 != nil {
			panic(err1)
		}
		_, err1 = io.WriteString(file, text)
		if err1 != nil {
			panic(err1)
		}
		file.Close()
		exec.Command("cmd", "/c", "start", svgFile).Start()
		//Linux 代码：
		//exec.Command("xdg-open", svgFile).Start()
		//Mac 代码：
		//exec.Command("open", svgFile).Start()
	}
    //......

 满二叉树按层作图

func Xml4Full(Levels int) string {
	var Xml, Node string
	Head := "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/" +
		"1999/xlink\" version=\"1.1\" width=\"Width\" height=\"Height\">\nCONTENT</svg>"
	Line := `<line x1="X1" y1="Y1" x2="X2" y2="Y2" style="stroke:black;stroke-width:2"/>`
	Link := `<a xlink:href="https://blog.csdn.net/boysoft2002" target="_blank">
	<text x="5" y="20" fill="blue">Hann's CSDN Homepage</text></a>`
	for i := 0; i < Levels; i++ {
		negative := -1
		for j := 0; j < Pow2(i); j++ {
			t := Pow2(Levels - i - 1)
			x, y := 50*(2*t*j+t), 120*i+50
			if Levels != 1 && i == Levels-1 {
				Xml = XmlNode(i, j, x, y, strconv.Itoa(Pow2(i)+j), "lightgreen")
			} else {
				Xml = XmlNode(i, j, x, y, strconv.Itoa(Pow2(i)+j))
			}
			if i > 0 {
				line1 := strings.Replace(Line, "X1", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y1", strconv.Itoa(y-30), 1)
				negative *= -1
				x0, y0 := 21, 21
				//过连线起始端的半径与纵轴线夹角取45度时x,y坐标修正值21,21[30/1.414]
				//取30度时 x0,y0:= 15,30-26；取60度时 x0,y0:= 26[15*1.732],15
				x += 50*negative*(2*t*j%2+t) - negative*x0
				line1 = strings.Replace(line1, "X2", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y2", strconv.Itoa(y-120+y0), 1)
				Xml = strings.Replace(Xml, "<ROOT/>", line1, 1)
			}
			Node += Xml
		}
	}
	Xml = strings.Replace(Head, "CONTENT", Node, 1)
	Xml = strings.Replace(Xml, "Width", strconv.Itoa(Pow2(Levels)*50), 1)
	Xml = strings.Replace(Xml, "Height", strconv.Itoa(Levels*120), 1)
	Xml = strings.Replace(Xml, "<ROOT/>", Link, 1)
	return Xml
}

全部源代码

本文所用的二叉树插图，都是用以下代码制作svg图片，然后另存png格式上传：

package main

import (
	"fmt"
	"io"
	"os"
	"os/exec"
	"strconv"
	"strings"
)

type btNode struct {
	Data   interface{}
	Lchild *btNode
	Rchild *btNode
}

type biTree struct {
	Root *btNode
}

func Build(data interface{}) *biTree {
	var list []interface{}
	if data == nil {
		return &biTree{}
	}
	switch data.(type) {
	case []interface{}:
		list = append(list, data.([]interface{})...)
	default:
		list = append(list, data)
	}
	if len(list) == 0 {
		return &biTree{}
	}
	node := &btNode{Data: list[0]}
	list = list[1:]
	Queue := []*btNode{node}
	for len(list) > 0 {
		if len(Queue) == 0 {
			//panic("Given array can not build binary tree.")
			return &biTree{Root: node}
		}
		cur := Queue[0]
		val := list[0]
		Queue = Queue[1:]
		if val != nil {
			cur.Lchild = &btNode{Data: val}
			if cur.Lchild != nil {
				Queue = append(Queue, cur.Lchild)
			}
		}
		list = list[1:]
		if len(list) > 0 {
			val := list[0]
			if val != nil {
				cur.Rchild = &btNode{Data: val}
				if cur.Rchild != nil {
					Queue = append(Queue, cur.Rchild)
				}
			}
			list = list[1:]
		}
	}
	return &biTree{Root: node}
}

func (bt *biTree) AppendNode(data interface{}) {
	root := bt.Root
	if root == nil {
		bt.Root = &btNode{Data: data}
		return
	}
	Queue := []*btNode{root}
	for len(Queue) > 0 {
		cur := Queue[0]
		Queue = Queue[1:]
		if cur.Lchild != nil {
			Queue = append(Queue, cur.Lchild)
		} else {
			cur.Lchild = &btNode{Data: data}
			return
		}
		if cur.Rchild != nil {
			Queue = append(Queue, cur.Rchild)
		} else {
			cur.Rchild = &btNode{Data: data}
			break
		}
	}
}

func Copy(bt *biTree) *biTree {
	root := bt.Root
	if root == nil {
		return &biTree{}
	}
	node := &btNode{Data: root.Data}
	Queue1, Queue2 := []*btNode{root}, []*btNode{node}
	for len(Queue1) > 0 {
		p1, p2 := Queue1[0], Queue2[0]
		Queue1, Queue2 = Queue1[1:], Queue2[1:]
		if p1.Lchild != nil {
			Node := &btNode{Data: p1.Lchild.Data}
			p2.Lchild = Node
			Queue1 = append(Queue1, p1.Lchild)
			Queue2 = append(Queue2, Node)
		}
		if p1.Rchild != nil {
			Node := &btNode{Data: p1.Rchild.Data}
			p2.Rchild = Node
			Queue1 = append(Queue1, p1.Rchild)
			Queue2 = append(Queue2, Node)
		}
	}
	return &biTree{Root: node}
}

func Mirror(bt *biTree) *biTree {
	root := bt.Root
	if root == nil {
		return &biTree{}
	}
	node := &btNode{Data: root.Data}
	Queue1, Queue2 := []*btNode{root}, []*btNode{node}
	for len(Queue1) > 0 {
		p1, p2 := Queue1[0], Queue2[0]
		Queue1, Queue2 = Queue1[1:], Queue2[1:]
		if p1.Lchild != nil {
			Node := &btNode{Data: p1.Lchild.Data}
			p2.Rchild = Node
			Queue1 = append(Queue1, p1.Lchild)
			Queue2 = append(Queue2, Node)
		}
		if p1.Rchild != nil {
			Node := &btNode{Data: p1.Rchild.Data}
			p2.Lchild = Node
			Queue1 = append(Queue1, p1.Rchild)
			Queue2 = append(Queue2, Node)
		}
	}
	return &biTree{Root: node}
}

func (bt *biTree) BForder2D() [][]interface{} {
	var res [][]interface{}
	root := bt.Root
	if root == nil {
		return res
	}
	Queue := []*btNode{root}
	for len(Queue) > 0 {
		Nodes := []interface{}{}
		Levels := len(Queue)
		for Levels > 0 {
			cur := Queue[0]
			Queue = Queue[1:]
			Nodes = append(Nodes, cur.Data)
			Levels--
			if cur.Lchild != nil {
				Queue = append(Queue, cur.Lchild)
			}
			if cur.Rchild != nil {
				Queue = append(Queue, cur.Rchild)
			}
		}
		res = append(res, Nodes)
	}
	return res
}

func (bt *biTree) LevelNullwith(Fills ...interface{}) [][]interface{} {
	var Nodes [][]interface{}
	var Fill0 interface{}
	if len(Fills) == 0 {
		Fill0 = nil
	} else if len(Fills) == 1 {
		Fill0 = Fills[0]
	} else {
		panic("Error: number of parameters is greater than 1")
	}
	root := bt.Root
	if root == nil {
		return Nodes
	}
	Count := 0
	Queue := []*btNode{root}
	for len(Queue) > 0 {
		nodes := []interface{}{}
		Level := len(Queue)
		for Level > 0 {
			cur := Queue[0]
			Queue = Queue[1:]
			nodes = append(nodes, cur.Data)
			Count++
			Level--
			if cur.Lchild != nil {
				Queue = append(Queue, cur.Lchild)
			}
			if cur.Rchild != nil {
				Queue = append(Queue, cur.Rchild)
			}
		}
		Nodes = append(Nodes, nodes)
	}
	newbiTree := Copy(bt)
	for i := 1; i < Pow2(len(Nodes))-Count; i++ {
		newbiTree.AppendNode(Fill0)
	}
	return newbiTree.BForder2D()
}

func XmlNode(M, N, X, Y int, Data string, Color ...string) string {
	var cColor, tColor string
	R := 30
	Node := `<Tab><g id="M,N">
	<circle cx="X" cy="Y" r="RC" stroke="black" stroke-width="2" fill="COLOR" />
	<text x="X" y="Y" fill="TextColor" font-size="20" text-anchor="middle"
		dominant-baseline="middle">DATA</text>
	<ROOT/>
	</g><CrLf>`
	if len(Color) == 0 {
		cColor, tColor = "orange", "red"
	} else if len(Color) == 1 {
		cColor, tColor = Color[0], "red"
	} else {
		cColor, tColor = Color[0], Color[1]
	}
	Node = strings.Replace(Node, "M", strconv.Itoa(M), 1)
	Node = strings.Replace(Node, "N", strconv.Itoa(N), 1)
	Node = strings.Replace(Node, "X", strconv.Itoa(X), 2)
	Node = strings.Replace(Node, "Y", strconv.Itoa(Y), 2)
	Node = strings.Replace(Node, "RC", strconv.Itoa(R), 1)
	Node = strings.Replace(Node, "DATA", Data, 1)
	Node = strings.Replace(Node, "COLOR", cColor, 1)
	Node = strings.Replace(Node, "TextColor", tColor, 1)
	Node = strings.Replace(Node, "<CrLf>", "\n", -1)
	Node = strings.Replace(Node, "<Tab>", "\t", -1)
	Node = strings.Replace(Node, "\n\t\t", " ", -1)
	return Node
}

func Pow2(x int) int { //x>=0
	res := 1
	for i := 0; i < x; i++ {
		res *= 2
	}
	return res
}

func Xml4Full(Levels int) string {
	var Xml, Node string
	Head := "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/" +
		"1999/xlink\" version=\"1.1\" width=\"Width\" height=\"Height\">\nCONTENT</svg>"
	Line := `<line x1="X1" y1="Y1" x2="X2" y2="Y2" style="stroke:black;stroke-width:2"/>`
	Link := `<a xlink:href="https://blog.csdn.net/boysoft2002" target="_blank">
	<text x="5" y="20" fill="blue">Hann's CSDN Homepage</text></a>`
	for i := 0; i < Levels; i++ {
		negative := -1
		for j := 0; j < Pow2(i); j++ {
			t := Pow2(Levels - i - 1)
			x, y := 50*(2*t*j+t), 120*i+50
			if Levels != 1 && i == Levels-1 {
				Xml = XmlNode(i, j, x, y, strconv.Itoa(Pow2(i)+j), "lightgreen")
			} else {
				Xml = XmlNode(i, j, x, y, strconv.Itoa(Pow2(i)+j))
			}
			if i > 0 {
				line1 := strings.Replace(Line, "X1", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y1", strconv.Itoa(y-30), 1)
				negative *= -1
				x0, y0 := 21, 21
				//过连线起始端的半径与纵轴线夹角取45度时x,y坐标修正值21,21[30/1.414]
				//取30度时 x0,y0:= 15,30-26；取60度时 x0,y0:= 26[15*1.732],15
				x += 50*negative*(2*t*j%2+t) - negative*x0
				line1 = strings.Replace(line1, "X2", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y2", strconv.Itoa(y-120+y0), 1)
				Xml = strings.Replace(Xml, "<ROOT/>", line1, 1)
			}
			Node += Xml
		}
	}
	Xml = strings.Replace(Head, "CONTENT", Node, 1)
	Xml = strings.Replace(Xml, "Width", strconv.Itoa(Pow2(Levels)*50), 1)
	Xml = strings.Replace(Xml, "Height", strconv.Itoa(Levels*120), 1)
	Xml = strings.Replace(Xml, "<ROOT/>", Link, 1)
	return Xml
}

func (bt *biTree) Xml4Tree() string {
	var Xml, Node string
	Head := "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/" +
		"1999/xlink\" version=\"1.1\" width=\"Width\" height=\"Height\">\nCONTENT</svg>"
	Line := `<line x1="X1" y1="Y1" x2="X2" y2="Y2" style="stroke:black;stroke-width:2"/>`
	Link := `<a xlink:href="https://blog.csdn.net/boysoft2002" target="_blank">
	<text x="5" y="20" fill="blue">Hann's CSDN Homepage</text></a>`
	List := bt.LevelNullwith()
	Levels := len(List)
	for i := Levels - 1; i >= 0; i-- {
		negative := -1
		TmpXml := ""
		for j := 0; j < Pow2(i); j++ {
			t := Pow2(Levels - i - 1)
			x, y := 50*(2*t*j+t), 120*i+50
			if List[i][j] != nil {
				fillColor := "orange"
				if i == Levels-1 || i > 0 && i < Levels-1 &&
					List[i+1][j*2] == nil && List[i+1][j*2+1] == nil {
					fillColor = "lightgreen"
				}
				TmpStr := ""
				switch List[i][j].(type) {
				case int:
					TmpStr = strconv.Itoa(List[i][j].(int))
				case float64:
					TmpStr = strconv.FormatFloat(List[i][j].(float64), 'g', -1, 64)
				case string:
					TmpStr = List[i][j].(string)
				default:
					TmpStr = "Error Type"
				}
				Xml = XmlNode(i, j, x, y, TmpStr, fillColor)
			}
			if i > 0 {
				line1 := strings.Replace(Line, "X1", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y1", strconv.Itoa(y-30), 1)
				negative *= -1
				x0, y0 := 21, 21
				x += 50*negative*(2*t*j%2+t) - negative*x0
				line1 = strings.Replace(line1, "X2", strconv.Itoa(x), 1)
				line1 = strings.Replace(line1, "Y2", strconv.Itoa(y-120+y0), 1)
				Xml = strings.Replace(Xml, "<ROOT/>", line1, 1)
			}
			if List[i][j] != nil {
				TmpXml += Xml
			}
		}
		Node = TmpXml + Node
	}
	Xml = strings.Replace(Head, "CONTENT", Node, 1)
	Xml = strings.Replace(Xml, "Width", strconv.Itoa(Pow2(Levels)*50), 1)
	Xml = strings.Replace(Xml, "Height", strconv.Itoa(Levels*120), 1)
	Xml = strings.Replace(Xml, "<ROOT/>", Link, 1)
	return Xml
}

func main() {

	var file *os.File
	var err1 error

	list1 := []interface{}{"-", "*", 6, "+", 3, nil, nil, 2, 8}
	list2 := []interface{}{1, 2, 3, 4, 5, nil, 6, 7, 8}
	tree1 := Build(list1)
	tree2 := Build(list2)
	tree3 := Mirror(tree2)
	texts := []string{tree1.Xml4Tree(), tree2.Xml4Tree(), tree3.Xml4Tree(), Xml4Full(4)}

	for index, text := range texts {
		svgFile := "./biTree0" + strconv.Itoa(index+1) + ".svg"
		file, err1 = os.Create(svgFile)
		if err1 != nil {
			panic(err1)
		}
		_, err1 = io.WriteString(file, text)
		if err1 != nil {
			panic(err1)
		}
		file.Close()
		exec.Command("cmd", "/c", "start", svgFile).Start()
		//Linux 代码：
		//exec.Command("xdg-open", svgFile).Start()
		//Mac 代码：
		//exec.Command("open", svgFile).Start()
	}

	fmt.Println("Welcome to my homepage: https://blog.csdn.net/boysoft2002")
	exec.Command("cmd", "/c", "start", "https://blog.csdn.net/boysoft2002").Start()

}

至此，已达成自己的预想结果，算法实在有点笨拙，但总算成功了。如有达人会更好的算法，且刚好看到此文，请务必给予点拨指教（不吝）......

 上面一长条“细线”并非分割线，而是11层的满二叉树，太宽了点击放大看看！

Hann Yang
关注
  • 45
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 34
    评论
专栏目录
基于C++实现二叉树与社会关系网络(可视化数据结构课设)【100012642】
06-07
二叉树，完成：(1)建立一棵二叉树，并对它进行先序、中序、后序遍历；(2)统计树中的叶子结点个数；(3)分别对它进行先序、中序、后序线索化；(4)实现先序、中序线索树的遍历；(5)显示该树和线索化后的树。 会关系网络系统中，通过图形化界面，显示某一个人的社会关系网络。寻找某一人可能认识的人（不是其好友），并查看这些人与其关联度（共同好友数）。根据可能认识的关联度对这些人进行排序。
数据结构：二叉树相关代码
08-24
这只是我学习的时候写的一些关于树的代码，保存一下
C语言中文网 Go语言二叉树数据结构的应用 源码
06-04
C语言中文网 Go语言二叉树数据结构的应用 源码。一开始以为“btree”是golang的包呢。后来发现不是。又找以为是“https://github.com/google/btree.git”。发现还不是。这才想起来可能是自己写的包。绕了一圈子。 另外网站中引入btree包 使用省略引用格式。不需要用"包名."调用函数，而直接使用btree中的函数。 文件中只有案例一。其他案例覆盖main函数就可以。
数据结构：二叉树的应用
04-25
一、 实验目的： 1、 掌握二叉树的定义和存储表示，掌握二叉树建立的算法； 2、 掌握二叉树的遍历（先序、中序、后序）算法 二、 问题描述 1. 查找自己家族的族谱，至少上溯至祖爷爷辈； 2. 族谱二叉树的建立（树的深度要>=4）； 3. 按照二叉树的结构输出二叉树； 4. 三种不同遍历算法遍历此二叉树； 5. 查找某人在二叉树中的位置，要求输出从根结点至查找结点的路径； 6. 统计二叉树的深度，输出叶子结点的信息。
数据结构：二叉树（链式存储）
12-07
用c语言实现： 二叉树的创建（递归法） 二叉树的遍历（递归（DLR、LDR、LRD）、层次）
svg-tree-drawer:使用SVG和JavaScript绘制树结构
05-18
SVG树抽屉 该项目提供了一个JavaScript库，用于构造树结构的交互式SVG图像。 这在描述语言学和计算机科学中常见的解析树时很有用。 该库提供了用于在树中切换折叠或延伸的分支的钩子。 背景 我在2004年开发了该项目的第一个版本，并且带有原始演示的仍然可用。 在2009年秋天，我通过华盛顿大学的计划参加了在线，该课程需要大量的树图绘制。 之前已经创建了SVG树状抽屉，我想使用基于浏览器的技术而不是使用LaTeX来完成课程工作。 但是，由于该课程是关于HPSG的，因此树中的每个节点都不是像我以前所使用的简单标签，而是一个复杂的属性值矩阵（AVM）。 因此，我着手重写SVG树抽屉，以使其更新并允许每个节点中包含任意内容，以便可以使用MathML渲染AVM。 例子 以下屏幕快照链接到示例的交互式SVG图像： 注意：此示例将XHTML（ application/xhtml+xml ），X
二叉树的构建和可视化（C++）
m0_73571517的博客
01-13 1714
根据层序遍历序列构造二叉树，在控制台打印输出二叉树
svg 树状图_树状图(关系图)
weixin_29207439的博客
02-22 1226
树状图(竖着)d3.json("city.json", function (err, data) {const width = 700, height = 800, padding = {top: 60, left: 30};const svg = d3.select("body").append("svg").attr("width", width + padding.left * 2).att...
graphviz 绘制二叉树
tyustli
10-11 326
【代码】graphviz 绘制二叉树。
二叉树可视化
毕业作品网站
07-25 1592
确定源数据格式定义Sources编写默认配置项定义Options为可视化实例编写渲染函数定义V我们可以从这3步中，创建各种各样的可视化例子，链表，数组，广义表，哈希表，图…只要你能想到的，StructV都可以做到，同时还能可视化数据前后的变化过程。StructV是一个用于构建数据可视化实例的基础引擎，底层图形库基于zrender。StructV本身不直接提供可视化功能，而是提供可视化的基础设施和核心功能。source函数还可以接受第二个参数，该参数为一个布尔值。若为true文件的。...
svg画出二叉树
05-30
这方面的资料很少，例子也很少，所以资源分3分。本人在项目中，画拓扑图，引用次方法进行改进，效果不错
基于SVG的树图Vue组件
xuwenzhi的专栏
09-14 716
项目需要，展示一个超大型交互树形组织结构图，找了很久没有合适的，而且大部分是类似菜单或者基于canvas的（如echarts），并不十分符合要求，遂用svg写了一个vue组件。效果如下 SVG的好处在于交互性，并且样式控制可以基于html css。 核心在于要根据树的数据结构计算节点的x、y坐标。 BLine.vue 用于两点间的贝塞尔曲线： <template> <svg width="5000" height="5000"> <path :.
go语言｜数据结构：二叉树可视化（svg树形图改进版）_csg树形图(1)
最新发布
2401_84166794的博客
04-17 386
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、
在Graphviz中画出好看的二叉树、B树、如何使用pos变量
HellHellNo的博客
10-23 2428
1、前提 使用过Graphviz画二叉树的同学都会发现，画出来的东西没有向教材那样规规矩矩，对于有强迫症的同学来说，可以采用以下思路进行完善 2、IDEA + Dot @startuml digraph btree { graph [nodesep=0.1, pad=0.02, ranksep=0.5] node [shape=circle, style=bold, fontsize=22, fontname=Consolas, width=0.8, height=0.8] edge
二叉树的可视化
Timsley的专栏
12-23 5230
本文主要介绍如何用Graphviz来绘画二叉树，从而验证二叉树是否正确
二叉查找树(二叉排序树、二叉搜索树)详解（可视化工具）
codingriver的博客
07-23 1664
二叉查找树又叫 二叉排序树、二叉搜索树 文章中树的概念和二叉树的定义转自二叉查找树(一)之 图文解析 和 C语言的实现 前驱节点和后继节点 参考：二叉搜索树的前驱节点和后继节点 删除节点参考：二叉查找树 - 删除节点 详解(Java实现) 树的概念 1. 树的定义 树是一种数据结构，它是由n（n>=1）个有限节点组成一个具有层次关系的集合。 把它叫做“树”是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。它具有以下的特点： (01) 每个节点有零个或多个子节点； (02) 没有父节点.
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
qq_72760247的博客
08-29 2314
echart树状图使用细则以及注意事项以及SVG实现树形组织结构图绘制（可实现页面要求设计的树状结构图）
Java实战（三）：二叉排序树的可视化
m0_68926749的博客
11-18 173
二叉树可视化java
svg 树状图_GitHub - aute/SVGDragTree: 一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件。 SDT example:...
weixin_35629057的博客
01-14 369
SDT 是什么？SDT 是 SVG Drag Tree 的缩写，一个可以通过拖放 SVG 图标，来生成拥有树形结构的视图与相应数据的前端组件。该组件不依赖任何其它库或框架，同时在样式上留给了用户极大的自由(因此，示例并不代表其最终样式)，其 .min.js 格式文件大小约为 13kb。SDT 做了哪些工作自动获取元素的大小，你无须担心元素会叠加在一起你可以设置元素之间怎样放置的从属关系有直线与曲线...
介绍数据结构 ：二叉树；
09-11
### 回答1： 二叉树是一种树形数据结构，它由一个根节点和最多两个子树组成，这两个子树被称为左子树和右子树。二叉树中的每个节点最多有两个子节点，如果一个节点只有一个子节点，那么这个子节点必须是左子节点。 二叉树有很多种类型，最基本的二叉树是二叉搜索树。在二叉搜索树中，左子树的所有节点的值都小于根节点的值，右子树的所有节点的值都大于根节点的值。这使得在二叉搜索树中进行查找、插入和删除操作非常高效。 除了二叉搜索树，还有平衡二叉树、红黑树、B树等多种二叉树类型，每种类型的二叉树都有其特定的应用场景和优缺点。 二叉树的遍历方式有三种：前序遍历（先访问根节点，然后遍历左子树和右子树）、中序遍历（先遍历左子树，然后访问根节点，最后遍历右子树）和后序遍历（先遍历左子树和右子树，最后访问根节点）。二叉树的遍历方式是解决很多问题的基础，比如查找二叉树中的最大值、计算二叉树的深度等。 ### 回答2： 二叉树是一种重要的数据结构，它由一组称为节点的元素组成，每个节点最多可以连接到两个子节点，分别称为左子节点和右子节点。二叉树的一个节点可以表示一个值或者一条数据。 二叉树具有以下特点： 1. 根节点：二叉树的顶部节点称为根节点，它是整个树的起点。 2. 叶子节点：没有子节点的节点称为叶子节点，它们位于树的末端。 3. 分支节点：有子节点的节点称为分支节点，它们是树的中间节点。 4. 子树：以某个节点为根节点，将其及其后代节点组成的树称为子树。 5. 左子树和右子树：一个节点的左右子节点分别构成左子树和右子树。 6. 高度：树中节点的最大层次称为树的高度。 二叉树有多种变种，如满二叉树、完全二叉树等。满二叉树是一种每个节点都有两个子节点的二叉树，而完全二叉树是一种除了最后一层外，其他层都是满的二叉树。 二叉树的应用十分广泛，常见的应用场景包括文件系统、数据库索引等。在二叉树中，插入、删除、查找等操作效率很高，时间复杂度通常为O(logN)。然而，如果二叉树退化成链表，操作效率会大大降低，时间复杂度为O(N)。 总的来说，二叉树是一种简单但十分重要的数据结构。它能够高效地存储、操作数据，被广泛应用于各个领域。 ### 回答3： 二叉树是一种常见的数据结构，它由节点组成，每个节点最多有两个子节点。 二叉树的特点是左子节点小于父节点，而右子节点大于父节点，这样的特性方便在树中进行排序和搜索操作。 二叉树有多种常见的类型，包括满二叉树、完全二叉树和平衡二叉树等。 满二叉树是指除了叶子节点外，每个节点都有两个子节点的二叉树。 完全二叉树是指除了最后一层以外的其他层都是满的，最后一层的节点从左到右依次填满。 平衡二叉树是指左子树和右子树的高度差不超过1的二叉树，这样可以保证在最坏情况下的搜索时间复杂度为O(logn)。 二叉树可以使用数组或链表实现，具体选择取决于应用场景和需求。 在二叉树中，我们可以使用递归或迭代的方式进行遍历操作，包括先序遍历、中序遍历和后序遍历。 先序遍历是指先访问根节点，然后递归遍历左子树和右子树。 中序遍历是指先递归遍历左子树，然后访问根节点，最后递归遍历右子树。 后序遍历是指先递归遍历左子树和右子树，然后访问根节点。 二叉树还可以进行插入、删除和查找操作。插入操作一般按照二叉搜索树的规则进行，即比根节点小的值插入左子树，比根节点大的值插入右子树。删除操作需要考虑不同情况，包括删除叶子节点、删除有一个子节点的节点和删除有两个子节点的节点。查找操作可以根据二叉搜索树的性质进行递归或迭代实现。 总之，二叉树是一种常见且重要的数据结构，能够方便地进行排序、搜索和插入等操作，同时还有多种类型和遍历方式供选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hann Yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值