g6/demos/gallery-worldcup-tree.html
2018-07-19 15:32:20 +08:00

156 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>画廊-2018 世界杯淘汰赛</title>
</head>
<body>
<style>
#mountNode {
width: 760px;
height: 744px;
background: url(https://gw.alipayobjects.com/zos/rmsportal/OSujrQtOvnOJVzRLmfIP.png);
}
</style>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/plugin.edge.polyline.js"></script>
<script>
$.getJSON('./assets/data/world-cup-knockout-match.json', data => {
G6.registerNode('card', {
draw(item) {
const group = item.getGraphicGroup();
const model = item.getModel();
const scoreTextStyle = {
textAlign: 'center',
fontWeight: 900,
fontSize: 14,
fill: '#000'
};
const teamNameTextStyle = {
textAlign: 'center',
fontSize: 12,
fill: 'rgba(0, 0, 0, 0.45)'
};
const width = 134;
const height = 60;
const keyShape = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
width,
height,
fill: '#fff',
radius: 4,
}
});
group.addShape('image', {
attrs: {
x: 8,
y: 8,
width: 40,
height: 24,
img: model.flagA
}
});
group.addShape('image', {
attrs: {
x: 86,
y: 8,
width: 40,
height: 24,
img: model.flagB
}
});
group.addShape('text', {
attrs: {
...teamNameTextStyle,
x: 28,
y: 52,
text: model.teamA,
}
});
group.addShape('text', {
attrs: {
...teamNameTextStyle,
x: 106,
y: 52,
text: model.teamB,
}
});
group.addShape('text', {
attrs: {
...scoreTextStyle,
x: 67,
y: 52,
text: model.scoreA + ' : '+ model.scoreB,
}
});
return keyShape;
},
anchor(node) {
const hierarchy = node.getHierarchy();
const parent = node.getParent();
if(parent && hierarchy > 2) {
const bbox = node.getBBox();
const parentBBox = parent.getBBox();
if(parentBBox.centerY > bbox.centerY) {
return [
[0, 0.5],
[1, 0.5],
[0.5, 1]
]
} else {
return [
[0, 0.5],
[1, 0.5],
[0.5, 0],
]
}
}
return [
[0, 0.5],
[1, 0.5],
[0.5, 0],
[0.5, 1]
]
}
});
const layout = new G6.Layouts.CompactBoxTree({
direction: 'V',
getHGap() {
return 12;
},
getVGap() {
return 16;
}
});
const tree = new G6.Tree({
container: 'mountNode',
width: 760,
height: 744,
layout,
fitView: 'cc'
});
tree.node({
shape: 'card'
});
tree.edge({
shape: 'polyline',
style: {
stroke: 'white',
lineWidth: 1,
strokeOpacity: 1
}
});
tree.read(data);
})
</script>
</body>
</html>