g6/demos/tree-mindmap.html
2018-09-03 14:47:42 +08:00

112 lines
2.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>