您的位置：首页 > 其它

vis 绘制二叉树

2017-10-27 00:00 134 查看
使用vis 绘制二叉树

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/uikit.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>迷宫寻路</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/maze.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/moment-with-locales.js"></script>
<script src="js/vis/vis.js"></script>
<link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css"/>
<!--<script src="js/sigma.js"></script>-->

</head>
<body>
<div class="container">
<div id="mynetwork" style="width: 1200px;height: 800px;border: 1px solid lightgrey"></div>
</div>

<script>

function pow(x, y) {
if (y == 0)
return 1
let ans = 1
while (y-- && y > 0)
ans *= x
return ans
}

//                0
//             1      2
//           3  4   5  6
var height = 60    //树的层高
var width = 30      //树最下层节点相邻的距离
var level = getLevel(head)  //树的最大层高,根节点在第一层
var nodes = []
var edges = []

//    x右,y下
//递归遍历,设置节点和距离
function dfs(h, lv) {
if (h == null)
return
console.log('h.x:' + h.x)
console.log('h.y:' + h.y)
if (h.left != null) {
h.left.y = h.y + height
h.left.x = h.x - pow(2, level - lv - 1) * width
nodes.push({
id: h.left.val, label: '' + h.left.val, x: h.left.x, y: h.left.y
})
//            nodes.push({
//                    id: h.left.val, label: '' + h.left.val, x: h.left.x, y: h.left.y,
//                    fixed: {x: true, y: true}
//                    fixed: {x: true, y: false}

edges.push({from: h.val, to: h.left.val, arrows: 'to'})
dfs(h.left, lv + 1)
}
if (h.right != null) {
h.right.y = h.y + height
h.right.x = h.x + pow(2, level - lv - 1) * width

nodes.push({
id: h.right.val, label: '' + h.right.val, x: h.right.x, y: h.right.y,
})
//            nodes.push({
//                id: h.right.val, label: '' + h.right.val, x: h.right.x, y: h.right.y,
//                fixed: {x: true, y: true}})
//                fixed: {x: true, y: false}
//            })

edges.push({from: h.val, to: h.right.val, arrows: 'to'})
dfs(h.right, lv + 1)
}
}

function draw() {
var head = create() //获取一棵树

if (head == null)
return
level = getLevel(head)
nodes.push({id: head.val, label: '' + head.val, x: 0, y: 0, fixed: {x: false, y: false}})
//        nodes.push({id: head.val, label: '' + head.val, x: 0, y: 0, fixed: {x: true, y: false}})

head.x = 0
head.y = 0
dfs(head, 1)
for (let i in nodes)
console.log(nodes[i])

for (let i in edges)
console.log(edges[i])

var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle',
},
physics: {
enabled: false,
}

};
network = new vis.Network(container, data, options);
}

function Node(val = 0, left = null, right = null) {
this.val = val
this.left = left
this.right = right
}

function create() {
var head = new Node(0)
head.left = new Node(1)
head.right = new Node(2)
head.left.left = new Node(3)
head.left.right = new Node(4)
head.right.left = new Node(5)
head.right.right = new Node(6)

3ff0
head.right.right.left = new Node(7)
head.right.right.right = new Node(8)
head.right.right.left.left=new Node(9)
return head
}

//中序递归遍历数树
function show(head) {
console.log(head)
if (head != null) {
console.log(head.val)
show(head.left)
show(head.right)
}

}

//获取树高
function getLevel(head) {
if (head == null) return 0

var maxLevel = 1

//根节点在第1层
dfs(head, 1)

function dfs(h, lv) {
if (h != null) {
maxLevel = Math.max(lv, maxLevel)
dfs(h.left, lv + 1)
dfs(h.right, lv + 1)
}
}

return maxLevel
}

var head = create()
console.log(pow(2, 10))
draw()
</script>
</body>
</html>




需要固定节点

或者关闭物理

否则x,y属性无法起作用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vis 二叉树
相关文章推荐
新的分享
章节导航