mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
251 lines
5.8 KiB
HTML
251 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>内置的边</title>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script>
|
|
G6.registerEdge(
|
|
'new-polyline',
|
|
{
|
|
options: {
|
|
style: {
|
|
lineWidth: 5,
|
|
stroke: 'green',
|
|
},
|
|
},
|
|
drawLabel(cfg, group) {
|
|
const labelstyle = this.getLabelStyle(cfg, {}, group);
|
|
const { x, y } = labelstyle;
|
|
cfg.label = 'xxx';
|
|
const label = group.addShape('text', {
|
|
attrs: {
|
|
x,
|
|
y,
|
|
stroke: 'blue',
|
|
},
|
|
});
|
|
console.log('labelStyle', labelstyle, label);
|
|
return label;
|
|
},
|
|
},
|
|
'polyline',
|
|
);
|
|
|
|
G6.registerNode(
|
|
'new-circle',
|
|
{
|
|
options: {
|
|
style: {
|
|
lineWidth: 5,
|
|
fill: 'green',
|
|
},
|
|
},
|
|
drawLabel(cfg, group) {
|
|
const labelstyle = this.getLabelStyle(cfg, {}, group);
|
|
const { x, y } = labelstyle;
|
|
const label = group.addShape('text', {
|
|
attrs: {
|
|
x,
|
|
y,
|
|
text: '默认',
|
|
stroke: 'red',
|
|
},
|
|
});
|
|
console.log('labelStyle', labelstyle, label);
|
|
return label;
|
|
},
|
|
},
|
|
'circle',
|
|
);
|
|
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 800,
|
|
height: 600,
|
|
defaultNode: {
|
|
size: [40, 40],
|
|
},
|
|
modes: {
|
|
default: ['brush-select', 'drag-node'],
|
|
},
|
|
});
|
|
|
|
/*
|
|
* data
|
|
*/
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: 'node1',
|
|
label: 'node1',
|
|
x: 100,
|
|
y: 100,
|
|
shape: 'new-circle',
|
|
},
|
|
{
|
|
id: 'node4',
|
|
// label: 'node4',
|
|
x: 150,
|
|
y: 300,
|
|
style: {
|
|
opacity: 0,
|
|
fill: '#fff',
|
|
stroke: '#fff',
|
|
},
|
|
// shape: 'rect'
|
|
},
|
|
{
|
|
id: 'node5',
|
|
label: 'node5',
|
|
x: 200,
|
|
y: 100,
|
|
// shape: 'rect'
|
|
},
|
|
{
|
|
id: 'node6',
|
|
// label: 'node6',
|
|
x: 350,
|
|
y: 300,
|
|
style: {
|
|
opacity: 0,
|
|
fill: '#fff',
|
|
stroke: '#fff',
|
|
},
|
|
// shape: 'rect'
|
|
},
|
|
{
|
|
id: 'node7',
|
|
// label: 'node7',
|
|
x: 350,
|
|
y: 200,
|
|
style: {
|
|
fill: '#fff',
|
|
stroke: '#fff',
|
|
},
|
|
// shape: 'rect'
|
|
},
|
|
{
|
|
id: 'node8',
|
|
label: 'node8',
|
|
x: 350,
|
|
y: 450,
|
|
// shape: 'rect'
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
source: 'node1',
|
|
target: 'node4',
|
|
shape: 'new-polyline',
|
|
label: 'edge1-4',
|
|
controlPoints: [{ x: 100, y: 200 }],
|
|
style: {
|
|
radius: 10,
|
|
offset: 20,
|
|
},
|
|
},
|
|
{
|
|
source: 'node4',
|
|
target: 'node5',
|
|
shape: 'new-polyline',
|
|
label: 'edge5-7',
|
|
// style: {
|
|
// lineWidth: 1.5,
|
|
// stroke: '#888',
|
|
// }
|
|
},
|
|
{
|
|
source: 'node4',
|
|
target: 'node7',
|
|
shape: 'line',
|
|
},
|
|
{
|
|
source: 'node4',
|
|
target: 'node6',
|
|
shape: 'cubic',
|
|
label: 'cubic',
|
|
style: {
|
|
stroke: '#088',
|
|
lineWidth: 3,
|
|
},
|
|
labelCfg: {
|
|
refY: 10,
|
|
refX: 40,
|
|
},
|
|
},
|
|
// {
|
|
// source: 'node6',
|
|
// target: 'node8',
|
|
// shape: 'arc'
|
|
// },
|
|
// {
|
|
// source: 'node5',
|
|
// target: 'node7',
|
|
// shape: 'quadratic'
|
|
// },
|
|
// {
|
|
// source: 'node4',
|
|
// target: 'node8',
|
|
// shape: 'polyline',
|
|
// style: {
|
|
// radius: 10,
|
|
// offset: 20
|
|
// }
|
|
// },
|
|
],
|
|
};
|
|
|
|
graph.data(data);
|
|
graph.render();
|
|
|
|
// graph.on('edge:click', evt => {
|
|
// console.log(evt)
|
|
// const { item } = evt
|
|
// graph.updateItem(item, {
|
|
// style: {
|
|
// lineWidth: 3,
|
|
// stroke: 'red'
|
|
// }
|
|
// })
|
|
// // const hasState = item.hasState('select')
|
|
// // if(!hasState) {
|
|
// // graph.setItemState(item, 'select', true);
|
|
// // }
|
|
// })
|
|
|
|
// graph.on('edge:mouseenter', evt => {
|
|
// const { item } = evt;
|
|
// graph.setItemState(item, 'hover', true);
|
|
// })
|
|
|
|
// graph.on('edge:mouseleave', evt => {
|
|
// const { item } = evt;
|
|
// const hasState = item.hasState('select')
|
|
// if(!hasState) {
|
|
// graph.setItemState(item, 'hover', false);
|
|
// graph.setItemState(item, 'running', false);
|
|
// }
|
|
// })
|
|
|
|
graph.on('edge:mouseenter', evt => {
|
|
const { item } = evt;
|
|
graph.setItemState(item, 'hover', true);
|
|
});
|
|
|
|
graph.on('edge:mouseleave', evt => {
|
|
const { item } = evt;
|
|
graph.setItemState(item, 'hover', false);
|
|
});
|
|
|
|
graph.on('edge:click', evt => {
|
|
const { item } = evt;
|
|
graph.setItemState(item, 'select', true);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|