mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
100 lines
2.6 KiB
HTML
100 lines
2.6 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">
|
||
$.getJSON('./assets/data/modeling-methods.json', function (data) {
|
||
G6.registerNode('treeNode', {
|
||
anchor: [[0, 0.5], [1, 0.5]]
|
||
});
|
||
G6.registerEdge('smooth', {
|
||
getPath: function getPath(item) {
|
||
var points = item.getPoints();
|
||
var start = points[0];
|
||
var end = points[points.length - 1];
|
||
var 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]];
|
||
}
|
||
});
|
||
var layout = new G6.Layouts.CompactBoxTree({
|
||
// direction: 'LR', // 方向（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, // 画布高
|
||
layout: layout,
|
||
fitView: 'autoZoom', // 自动缩放
|
||
animate: true
|
||
});
|
||
tree.node({
|
||
shape: 'treeNode',
|
||
size: 8,
|
||
label: function label(model) {
|
||
if (model.children && model.children.length > 0) {
|
||
return {
|
||
text: model.name,
|
||
textAlign: 'right'
|
||
};
|
||
}
|
||
return {
|
||
text: model.name,
|
||
textAlign: 'left'
|
||
};
|
||
},
|
||
labelOffsetX: function labelOffsetX(model) {
|
||
if (model.children && model.children.length > 0) {
|
||
return -10;
|
||
}
|
||
return 10;
|
||
}
|
||
});
|
||
tree.edge({
|
||
shape: 'smooth'
|
||
});
|
||
tree.on('node:click', ({item})=>{
|
||
const model = item.getModel();
|
||
let {collapsed} = model;
|
||
collapsed = !collapsed;
|
||
tree.update(item, {
|
||
collapsed
|
||
});
|
||
});
|
||
tree.read({
|
||
roots: [data]
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|