修改外部指针id，增加自定义的三叉树
This commit is contained in:
+62
-58
@@ -1,96 +1,100 @@
|
||||
/**
|
||||
* 三叉树
|
||||
*/
|
||||
SV.registerLayout('TriTree', {
|
||||
SV.registerLayout('TriTree', {
|
||||
defineOptions() {
|
||||
return {
|
||||
/**
|
||||
* 结点
|
||||
*/
|
||||
element: {
|
||||
node: {
|
||||
default: {
|
||||
type: 'tri-tree-node',
|
||||
size: [60, 30],
|
||||
label: '[data]',
|
||||
style: {
|
||||
fill: '#ff2e63',
|
||||
stroke: "#333",
|
||||
cursor: 'pointer'
|
||||
fill: '#95e1d3',
|
||||
stroke: '#333',
|
||||
cursor: 'pointer',
|
||||
backgroundFill: '#eee'
|
||||
},
|
||||
labelOptions: {
|
||||
style: { fontSize: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 箭头
|
||||
*/
|
||||
link: {
|
||||
child: {
|
||||
type: 'line',
|
||||
child: {
|
||||
sourceAnchor: index => index,
|
||||
targetAnchor: 3,
|
||||
type: 'line',
|
||||
style: {
|
||||
stroke: '#333',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
parent: {
|
||||
type: 'line',
|
||||
r_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
targetAnchor: 5,
|
||||
curveOffset: -20,
|
||||
style: {
|
||||
stroke: '#A9A9A9',
|
||||
//边的响应范围
|
||||
lineAppendWidth: 6,
|
||||
cursor: 'pointer',
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
//参数：半径、偏移量
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
l_parent: {
|
||||
type: 'quadratic',
|
||||
sourceAnchor: 4,
|
||||
targetAnchor: 2,
|
||||
curveOffset: 20,
|
||||
style: {
|
||||
stroke: '#999',
|
||||
lineAppendWidth: 10,
|
||||
lineWidth: 1.6,
|
||||
endArrow: 'default',
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 指针
|
||||
*/
|
||||
marker: {
|
||||
external: {
|
||||
type: "pointer",
|
||||
type: 'pointer',
|
||||
anchor: 3,
|
||||
offset: 14,
|
||||
labelOffset: 2,
|
||||
style: {
|
||||
fill: '#f08a5d'
|
||||
},
|
||||
labelOptions: {
|
||||
style: {
|
||||
// stroke:
|
||||
fontSize: 15,
|
||||
fill: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 布局
|
||||
*/
|
||||
addressLabel: {
|
||||
style: {
|
||||
fill: '#999'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
xInterval: 40,
|
||||
yInterval: 40,
|
||||
},
|
||||
/**
|
||||
* 动画
|
||||
*/
|
||||
//animation: {
|
||||
// enable: true,
|
||||
// duration: 750,
|
||||
// timingFunction: 'easePolyOut'
|
||||
//}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@@ -99,44 +103,44 @@
|
||||
*/
|
||||
layoutItem(node, parent, index, layoutOptions) {
|
||||
// 次双亲不进行布局
|
||||
if(!node) {
|
||||
if (!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
let bound = node.getBound(), //获取包围盒
|
||||
width = bound.width,
|
||||
height = bound.height,
|
||||
group = new Group(node); //创建分组
|
||||
|
||||
|
||||
//有双亲，设置结点的位置
|
||||
if(parent) {
|
||||
if (parent) {
|
||||
// 纵坐标
|
||||
node.set('y', parent.get('y') + layoutOptions.yInterval + height);
|
||||
// 左节点横坐标
|
||||
if(index === 0) {
|
||||
if (index === 0) {
|
||||
node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
|
||||
}
|
||||
// 右结点横坐标
|
||||
if(index === 1) {
|
||||
if (index === 1) {
|
||||
node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
|
||||
}
|
||||
}
|
||||
//有孩子
|
||||
if(node.child && (node.child[0] || node.child[1])) {
|
||||
if (node.child && (node.child[0] || node.child[1])) {
|
||||
let leftChild = node.child[0],
|
||||
rightChild = node.child[1],
|
||||
leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
|
||||
rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions),
|
||||
intersection = null,
|
||||
move = 0;
|
||||
|
||||
|
||||
// 处理左子树中子树相交问题
|
||||
if(leftGroup && rightChild) {
|
||||
if (leftGroup && rightChild) {
|
||||
//求出包围盒相交部分
|
||||
intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
|
||||
move = 0;
|
||||
//处理
|
||||
if(intersection && intersection.width > 0) {
|
||||
if (intersection && intersection.width > 0) {
|
||||
move = (intersection.width + layoutOptions.xInterval) / 2;
|
||||
// console.log(move,intersection.width,layoutOptions.xInterval);
|
||||
leftGroup.translate(-move, 0);
|
||||
@@ -145,17 +149,17 @@
|
||||
}
|
||||
|
||||
//加入分组
|
||||
if(leftGroup) {
|
||||
if (leftGroup) {
|
||||
group.add(leftGroup);
|
||||
}
|
||||
if(rightGroup) {
|
||||
if (rightGroup) {
|
||||
group.add(rightGroup)
|
||||
}
|
||||
|
||||
}
|
||||
//返回分组
|
||||
return group;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 布局函数
|
||||
|
||||
+122
-27
@@ -1,16 +1,19 @@
|
||||
const SOURCES_DATA = [{
|
||||
"BinaryTree0": {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T1"
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0x617ee0",
|
||||
"0x617f10"
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0x617eb0",
|
||||
"name": "T1",
|
||||
"data": "Z",
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
@@ -19,19 +22,57 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617ee0",
|
||||
"name": "T1->lchild",
|
||||
"data": "D",
|
||||
"type": "default"
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x617f70",
|
||||
"0x617f40"
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f10",
|
||||
"name": "T1->rchild",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
@@ -39,39 +80,93 @@ const SOURCES_DATA = [{
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f70",
|
||||
"name": "(T1->rchild)->lchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x0"
|
||||
],
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0x0"
|
||||
],
|
||||
"external": [
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
"isFirstDebug": false
|
||||
}
|
||||
}, {
|
||||
"TriTree0": {
|
||||
"data": [{
|
||||
"external": [
|
||||
"T"
|
||||
],
|
||||
"parent": [
|
||||
"0x0"
|
||||
],
|
||||
"child": [
|
||||
"0xb07ee0",
|
||||
"0xb07f10"
|
||||
],
|
||||
"id": "0xb07eb0",
|
||||
"name": "T",
|
||||
"data": "A",
|
||||
"root": true,
|
||||
"type": "default"
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617fa0"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617f40",
|
||||
"name": "(T1->rchild)->rchild",
|
||||
"id": "0xb07ee0",
|
||||
"name": "T->lchild",
|
||||
"data": "B",
|
||||
"type": "default",
|
||||
"l_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"t"
|
||||
"T1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"child": [
|
||||
"0x0",
|
||||
"0x617f40"
|
||||
"0x0"
|
||||
],
|
||||
"id": "0x617fa0",
|
||||
"name": "((T1->rchild)->rchild)->rchild",
|
||||
"data": "E",
|
||||
"id": "0xb07f10",
|
||||
"name": "T->rchild",
|
||||
"data": "C",
|
||||
"type": "default",
|
||||
"r_parent": [
|
||||
"0xb07eb0"
|
||||
],
|
||||
"external": [
|
||||
"r"
|
||||
"T2"
|
||||
]
|
||||
}
|
||||
],
|
||||
"layouter": "BinaryTree"
|
||||
"layouter": "TriTree"
|
||||
},
|
||||
"handleUpdate": {
|
||||
"isEnterFunction": false,
|
||||
|
||||
+132
-129
@@ -1,151 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#leak {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-top: 1px dashed #000;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.75s ease-in-out;
|
||||
}
|
||||
|
||||
#leak>span {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
.down {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="resize">resize</button>
|
||||
<button id="relayout">relayout</button>
|
||||
<button id="switch-mode">switch mode</button>
|
||||
<button id="brush-select">brush-select</button>
|
||||
<span id="pos"></span>
|
||||
|
||||
#leak {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
top: 100px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-top: 1px dashed #000;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.75s ease-in-out;
|
||||
}
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/TriTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
<script src="./Layouter/ChainHashTable.js"></script>
|
||||
<script src="./Layouter/Array.js"></script>
|
||||
<script src="./Layouter/HashTable.js"></script>
|
||||
<script src="./Layouter/LinkStack.js"></script>
|
||||
<script src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
|
||||
#leak > span {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script>
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
</div>
|
||||
</div>
|
||||
let dataIndex = 0,
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
|
||||
<button id="btn-prev">prev</button>
|
||||
<button id="btn-next">next</button>
|
||||
<button id="resize">resize</button>
|
||||
<button id="relayout">relayout</button>
|
||||
<button id="switch-mode">switch mode</button>
|
||||
<button id="brush-select">brush-select</button>
|
||||
<span id="pos"></span>
|
||||
let enableBrushSelect = false;
|
||||
|
||||
<script src="./../dist/sv.js"></script>
|
||||
<script>
|
||||
const Group = SV.Group,
|
||||
Bound = SV.Bound,
|
||||
G6 = SV.G6,
|
||||
Vector = SV.Vector;
|
||||
</script>
|
||||
<script src="./Layouter/LinkList.js"></script>
|
||||
<script src="./Layouter/BinaryTree.js"></script>
|
||||
<script src="./Layouter/Stack.js"></script>
|
||||
<script src="./Layouter/LinkQueue.js"></script>
|
||||
<script src="./Layouter/GeneralizedList.js"></script>
|
||||
<script src="./Layouter/ChainHashTable.js"></script>
|
||||
<script src="./Layouter/Array.js"></script>
|
||||
<script src="./Layouter/HashTable.js"></script>
|
||||
<script src="./Layouter/LinkStack.js"></script>
|
||||
<script src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script src="./Layouter/SqQueue.js"></script>
|
||||
<script src="./Layouter/PTree.js"></script>
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
<script src="./data.js"></script>
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
|
||||
<script>
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
groupPadding: 40,
|
||||
},
|
||||
});
|
||||
const leak = document.getElementById('leak');
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = SOURCES_DATA[dataIndex];
|
||||
cur.render(curData);
|
||||
|
||||
let enableBrushSelect = false;
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
const container = document.getElementById('container'),
|
||||
pos = document.getElementById('pos');
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
|
||||
const leak = document.getElementById('leak');
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 800 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
|
||||
cur.render(curData);
|
||||
document.getElementById('relayout').addEventListener('click', e => {
|
||||
cur.reLayout();
|
||||
});
|
||||
|
||||
document.getElementById('btn-next').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[++dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.updateStyle('Array', newArrayOption);
|
||||
});
|
||||
|
||||
document.getElementById('btn-prev').addEventListener('click', e => {
|
||||
curData = SOURCES_DATA[--dataIndex];
|
||||
cur.render(curData);
|
||||
});
|
||||
document.getElementById('brush-select').addEventListener('click', e => {
|
||||
enableBrushSelect = !enableBrushSelect;
|
||||
cur.switchBrushSelect(enableBrushSelect);
|
||||
});
|
||||
|
||||
document.getElementById('resize').addEventListener('click', e => {
|
||||
container.style.height = 800 + 'px';
|
||||
cur.resize(container.offsetWidth, container.offsetHeight);
|
||||
});
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
document.getElementById('relayout').addEventListener('click', e => {
|
||||
cur.reLayout();
|
||||
});
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
document.getElementById('switch-mode').addEventListener('click', e => {
|
||||
cur.updateStyle('Array', newArrayOption);
|
||||
});
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
document.getElementById('brush-select').addEventListener('click', e => {
|
||||
enableBrushSelect = !enableBrushSelect;
|
||||
cur.switchBrushSelect(enableBrushSelect);
|
||||
});
|
||||
|
||||
cur.on('onLeakAreaUpdate', payload => {
|
||||
leak.style.opacity = payload.hasLeak ? 1 : 0;
|
||||
leak.style.top = payload.leakAreaY - 40 + 'px';
|
||||
});
|
||||
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user