mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 12:49:04 +08:00
113 lines
2.9 KiB
HTML
113 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>紧凑树</title>
|
||
<style>
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
|
||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||
<script src="../build/g6.js"></script>
|
||
<script type="text/javascript">
|
||
const Util = G6.Util;
|
||
// 注册脑图节点
|
||
G6.registerNode('mindNode', {
|
||
anchor: [
|
||
[ 0, 0.5 ],
|
||
[ 1, 0.5 ]
|
||
]
|
||
});
|
||
// 注册脑图边
|
||
G6.registerEdge('mindEdge', {
|
||
getPath(item) {
|
||
const points = item.getPoints();
|
||
const start = points[0];
|
||
const end = points[points.length - 1];
|
||
const hgap = Math.abs(end.x - start.x);
|
||
if (end.x > start.x) {
|
||
return [
|
||
[ 'M', start.x, start.y ],
|
||
[ 'C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y ]
|
||
];
|
||
}
|
||
return [
|
||
[ 'M', start.x, start.y ],
|
||
[ 'C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y ]
|
||
];
|
||
}
|
||
});
|
||
$.getJSON('./assets/data/modeling-methods.json', function (data) {
|
||
var layout = new G6.Layouts.Mindmap({
|
||
direction: 'H', // 方向（LR/RL/H/TB/BT/V）
|
||
getHGap: function getHGap() /* d */ {
|
||
// 横向间距
|
||
return 100;
|
||
},
|
||
getVGap: function getVGap() /* d */ {
|
||
// 竖向间距
|
||
return 10;
|
||
}
|
||
});
|
||
var tree = new G6.Tree({
|
||
id: 'mountNode', // 容器ID
|
||
height: window.innerHeight, // 画布高
|
||
fitView: 'autoZoom', // 自动缩放
|
||
layout,
|
||
});
|
||
tree.node({
|
||
label(model) {
|
||
return {
|
||
text: model.name,
|
||
stroke: '#fff',
|
||
lineWidth: 3
|
||
};
|
||
},
|
||
size: 8,
|
||
shape: 'mindNode'
|
||
});
|
||
tree.edge({
|
||
shape: 'mindEdge'
|
||
});
|
||
tree.on('afterchange', ()=>{
|
||
tree.getNodes().forEach(node=>{
|
||
const model = node.getModel();
|
||
const label = node.getLabel();
|
||
const keyShape = node.getKeyShape();
|
||
const parent = node.getParent();
|
||
const box = keyShape.getBBox();
|
||
const labelBox = label.getBBox();
|
||
let dx = (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2+ 8;
|
||
let dy = (box.maxY - box.minY) / 2 + 8;
|
||
if(parent){
|
||
const parentModel = parent.getModel();
|
||
if(parentModel.x > model.x){
|
||
dx = -dx;
|
||
}
|
||
dy = 0;
|
||
} else {
|
||
dx = 0;
|
||
}
|
||
label.translate(dx, dy);
|
||
});
|
||
tree.draw();
|
||
});
|
||
tree.read({ roots: [data] });
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|