2018-06-05 23:58:10 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
2018-09-03 14:47:42 +08:00
|
|
|
|
<title>缩进树</title>
|
2018-06-05 23:58:10 +08:00
|
|
|
|
<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">
|
|
|
|
|
|
G6.registerNode('treeNode', {
|
|
|
|
|
|
anchor: [
|
|
|
|
|
|
[ 0, 0.5 ],
|
|
|
|
|
|
[ 0.5, 1 ]
|
|
|
|
|
|
]
|
|
|
|
|
|
});
|
|
|
|
|
|
G6.registerEdge('VH', {
|
|
|
|
|
|
getPath(item) {
|
|
|
|
|
|
const points = item.getPoints();
|
|
|
|
|
|
const start = points[0];
|
|
|
|
|
|
const end = points[points.length - 1];
|
|
|
|
|
|
return [
|
|
|
|
|
|
[ 'M', start.x, start.y ],
|
|
|
|
|
|
[ 'L', start.x, end.y ],
|
|
|
|
|
|
[ 'L', end.x, end.y ]
|
|
|
|
|
|
];
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$.getJSON('./assets/data/modeling-methods.json', function (data) {
|
|
|
|
|
|
var layout = new G6.Layouts.IndentedTree({
|
|
|
|
|
|
direction: 'LR', // 方向（LR/RL/H）
|
|
|
|
|
|
indent: 30, // 缩进量
|
2018-09-03 14:47:42 +08:00
|
|
|
|
getVGap() /* d */ {
|
2018-06-05 23:58:10 +08:00
|
|
|
|
// 竖向间距
|
|
|
|
|
|
return 4;
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
var tree = new G6.Tree({
|
|
|
|
|
|
id: 'mountNode', // 容器ID
|
|
|
|
|
|
height: window.innerHeight, // 画布高
|
|
|
|
|
|
layout, // 缩进树布局
|
|
|
|
|
|
fitView: 'autoZoom' // 自动缩放
|
|
|
|
|
|
});
|
|
|
|
|
|
tree.node({
|
|
|
|
|
|
shape: 'treeNode',
|
|
|
|
|
|
size: 16
|
|
|
|
|
|
}).label(function (obj) {
|
|
|
|
|
|
return obj.name;
|
|
|
|
|
|
});
|
|
|
|
|
|
tree.edge({
|
|
|
|
|
|
shape: 'VH'
|
|
|
|
|
|
});
|
|
|
|
|
|
tree.on('afterchange', ()=>{
|
|
|
|
|
|
tree.getNodes().forEach(node=>{
|
|
|
|
|
|
const model = node.getModel();
|
|
|
|
|
|
const label = node.getLabel();
|
|
|
|
|
|
const keyShape = node.getKeyShape();
|
|
|
|
|
|
const children = node.getChildren();
|
|
|
|
|
|
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 = 0;
|
|
|
|
|
|
label.translate(dx, dy);
|
|
|
|
|
|
});
|
|
|
|
|
|
tree.draw();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
tree.read({ roots: [data] });
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
