Go語言制作svg格式樹形圖的示例代碼
最近一直在刷二叉樹題目,但在要驗證結(jié)果時,通常用中序遍歷、層序遍歷查看結(jié)果,驗證起來沒有畫圖來得直觀,所有想到自己動手制作二叉樹的樹形圖。 直接開干,先從svg入手:

什么是SVG
SVG定義
SVG是可伸縮矢量圖形 (Scalable Vector Graphics),于2003年1月14日成為 W3C 推薦標(biāo)準(zhǔn)。
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個整體
SVG優(yōu)點
- SVG 可被非常多的工具讀取和修改(比如記事本)
- SVG 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強。
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
- SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
- SVG 可在圖像質(zhì)量不下降的情況下被放大
- SVG 圖像中的文本是可選的,同時也是可搜索的(很適合制作地圖)
- SVG 可以與 JavaScript 技術(shù)一起運行
- SVG 是開放的標(biāo)準(zhǔn)
- SVG 文件是純粹的 XML
預(yù)定義元素
- 矩形 <rect>
- 圓形 <circle>
- 橢圓 <ellipse>
- 直線 <line>
- 文字 <text>
- 路徑 <path>
- 折線 <polyline>
- 多邊形 <polygon>

制作二叉樹的樹形圖,就使用圓形、直線、文字三種即可:
圓形 <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="red"/> </svg>
cx和cy屬性定義圓點的x和y坐標(biāo);r屬性定義圓的半徑
如果省略cx和cy,圓的中心會被設(shè)置為(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,y2 屬性定義線條的起始端點坐標(biāo)
x2,y2 屬性定義線條的結(jié)束端點坐標(biāo)
文字 <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 屬性定義文字左對齊顯示時的起始坐標(biāo)(居中對齊則是文字中間點)
fill 屬性定義文字的顏色

結(jié)點SVG格式
根結(jié)點
由<circle>和<text>組成,存放結(jié)點的數(shù)據(jù)域
<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>
子樹結(jié)點
比根結(jié)點多出<line>元素,用來表示父結(jié)點左或右指針的指向
<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>
葉結(jié)點
與子樹結(jié)點相同,為區(qū)別顯示把<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>
結(jié)點坐標(biāo)
坐標(biāo)的確定
結(jié)點坐標(biāo)確定,把二叉樹還原成滿二叉樹,結(jié)點位置標(biāo)記為:
[ [0,0], [1,0], [1,1], [2,0], [2,1], [2,2], [2,3], [3,0]......],再用循環(huán)計算出各點坐標(biāo)。
連線的夾角
實際上不用考慮連線夾角,只要計算出連線始終兩端點的坐標(biāo)即可:

結(jié)點文本
以字符串形式保存好屬性變量的特征關(guān)鍵詞,用于遍歷二叉樹時替換成實際數(shù)據(jù):
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
}二叉樹轉(zhuǎn)SVG
遍歷二叉樹對應(yīng)的滿二叉樹,讀出數(shù)據(jù)域并計算坐標(biāo),轉(zhuǎn)成svg格式:
格式轉(zhuǎn)換
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: 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
}寫入文件、調(diào)取瀏覽
//......
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()
}
//......全部源代碼
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: rel="external nofollow" rel="external nofollow" 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坐標(biāo)修正值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: rel="external nofollow" rel="external nofollow" 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()
}至此,已達成自己的預(yù)想結(jié)果,算法實在有點笨拙,但總算成功了。
到此這篇關(guān)于Go語言制作svg格式樹形圖的示例代碼的文章就介紹到這了,更多相關(guān)Go語言樹形圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
golang socket斷點續(xù)傳大文件的實現(xiàn)方法
今天小編就為大家分享一篇golang socket斷點續(xù)傳大文件的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-07-07
Go語言常見錯誤之濫用getters/setters誤區(qū)實例探究
在Go語言編程中,恰如其分地使用getters和setters是至關(guān)重要的,過度和不適當(dāng)?shù)厥褂盟鼈兛赡軐?dǎo)致代碼冗余、可讀性差和封裝不當(dāng),在本文中,我們將深入探討如何識別濫用getter和setter的情況,以及如何采取最佳實踐來避免這些常見的Go錯誤2024-01-01
Go語言使用Timeout Context取消任務(wù)的實現(xiàn)
本文主要介紹了Go語言使用Timeout Context取消任務(wù)的實現(xiàn),包括基本的任務(wù)取消和控制HTTP客戶端請求的超時,具有一定的參考價值,感興趣的可以了解一下2024-01-01
使用golang生成prometheus格式數(shù)據(jù)
Prometheus是一個開源的監(jiān)控系統(tǒng),擁有許多Advanced?Feature,本文將介紹Primetheus?client的使用,并基于golang生成prometheus格式數(shù)據(jù),希望對大家有所幫助2025-02-02
Go語言編譯程序從后臺運行,不出現(xiàn)dos窗口的操作
這篇文章主要介紹了Go語言編譯程序從后臺運行,不出現(xiàn)dos窗口的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-04-04
go?defer?return?panic?執(zhí)行順序示例詳解
這篇文章主要介紹了go?defer?return?panic?執(zhí)行順序,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01

