mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
108 lines
2.3 KiB
HTML
108 lines
2.3 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">
|
|
<script src="./assets/d3-4.13.0.min.js"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="../build/plugins.js"></script>
|
|
<title>测试</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<div id="minimap"></div>
|
|
|
|
<style>
|
|
/* 此处书写样式代码，支持 less scss */
|
|
/* @import 'antd/dist/antd.css'; */
|
|
.card-container {
|
|
width: 170px;
|
|
height: 74px;
|
|
border: 1px solid #DBDBDB;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
.card-container .main-text{
|
|
text-align: center;
|
|
margin: 12px 14px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 0px;
|
|
font-size: 16px;
|
|
border-bottom: 1px solid #DBDBDB;
|
|
}
|
|
.card-container p{
|
|
font-size: 12px;
|
|
margin: 8px;
|
|
}
|
|
.card-container .value-text{
|
|
margin-left: 12px;
|
|
text-align: left;
|
|
}
|
|
.card-container .percent-text{
|
|
margin-right: 12px;
|
|
float: right;
|
|
color: red
|
|
}
|
|
</style>
|
|
<script>
|
|
G6.registerGuide('tag', {
|
|
draw(item) {
|
|
const group = item.getGraphicGroup();
|
|
const model = item.getModel();
|
|
const {nodeId, label} = model;
|
|
const graph = item.getGraph();
|
|
const node = graph.find(nodeId);
|
|
const nodeBox = node.getBBox();
|
|
const dy = 32;
|
|
return group.addShape('path', {
|
|
attrs: {
|
|
path: [['M', nodeBox.centerX, nodeBox.minY - dy], ['L', nodeBox.centerX, nodeBox.minY]],
|
|
stroke: 'red',
|
|
lineDash: [2, 2],
|
|
endArrow: true,
|
|
},
|
|
});;
|
|
}
|
|
});
|
|
const data = {
|
|
roots: [{
|
|
id:'root1',
|
|
label: 'root',
|
|
children: [{
|
|
label: 'child1',
|
|
children: [
|
|
{
|
|
label: 'child\n1.1'
|
|
}
|
|
]
|
|
}, {
|
|
label: 'child2'
|
|
}]
|
|
}]
|
|
};
|
|
const graph = new G6.Tree({
|
|
container: 'mountNode',
|
|
width: 500,
|
|
height: 500
|
|
});
|
|
graph.read(data);
|
|
|
|
graph.add('guide', {
|
|
id:'gd',
|
|
shape: 'tag',
|
|
nodeId: 'root1',
|
|
label: '这是 node1'
|
|
});
|
|
graph.focus('gd');
|
|
setTimeout(() => {
|
|
graph.remove('gd');
|
|
}, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|