mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
267 lines
7.0 KiB
HTML
267 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<div id="mountNode2"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="./assets/d3-4.13.0.min.js"></script>
|
|
<script src="../build/circular.js"></script>
|
|
<script>
|
|
const data0 = {
|
|
"nodes": [
|
|
{"id": "0", "label": "0"},
|
|
{"id": "1", "label": "1"},
|
|
{"id": "2", "label": "2"},
|
|
{"id": "3", "label": "3"},
|
|
{"id": "4", "label": "4"}
|
|
],
|
|
"edges": [
|
|
{"source": "0", "target": "1", "value": 1},
|
|
{"source": "1", "target": "2", "value": 8},
|
|
{"source": "2", "target": "3", "value": 8},
|
|
{"source": "3", "target": "0", "value": 8},
|
|
{"source": "1", "target": "3", "value": 8},
|
|
{"source": "0", "target": "4", "value": 8}
|
|
]
|
|
};
|
|
|
|
const data = {
|
|
"nodes": [
|
|
{"id": "0", "label": "0"},
|
|
{"id": "1", "label": "1"},
|
|
{"id": "2", "label": "2"},
|
|
{"id": "3", "label": "3"},
|
|
{"id": "4", "label": "4"},
|
|
{"id": "5", "label": "5"},
|
|
{"id": "6", "label": "6"},
|
|
{"id": "7", "label": "7"},
|
|
{"id": "8", "label": "8"},
|
|
{"id": "9", "label": "9"},
|
|
{"id": "10", "label": "10"},
|
|
{"id": "11", "label": "11"},
|
|
{"id": "12", "label": "12"},
|
|
{"id": "13", "label": "13"},
|
|
{"id": "14", "label": "14"},
|
|
{"id": "15", "label": "15"},
|
|
{"id": "16", "label": "16"},
|
|
{"id": "17", "label": "17"},
|
|
{"id": "18", "label": "18"},
|
|
{"id": "19", "label": "19"},
|
|
{"id": "20", "label": "20"},
|
|
{"id": "21", "label": "21"},
|
|
{"id": "22", "label": "22"},
|
|
{"id": "23", "label": "23"},
|
|
{"id": "24", "label": "24"},
|
|
{"id": "25", "label": "25"},
|
|
{"id": "26", "label": "26"},
|
|
{"id": "27", "label": "27"},
|
|
{"id": "28", "label": "28"},
|
|
{"id": "29", "label": "29"},
|
|
{"id": "30", "label": "30"},
|
|
{"id": "31", "label": "31"},
|
|
{"id": "32", "label": "32"},
|
|
{"id": "33", "label": "33"}
|
|
],
|
|
"edges": [
|
|
{"source": "0", "target": "1"},
|
|
{"source": "0", "target": "2"},
|
|
{"source": "0", "target": "3"},
|
|
{"source": "0", "target": "4"},
|
|
{"source": "0", "target": "5"},
|
|
{"source": "0", "target": "7"},
|
|
{"source": "0", "target": "8"},
|
|
{"source": "0", "target": "9"},
|
|
{"source": "0", "target": "10"},
|
|
{"source": "0", "target": "11"},
|
|
{"source": "0", "target": "13"},
|
|
{"source": "0", "target": "14"},
|
|
{"source": "0", "target": "15"},
|
|
{"source": "0", "target": "16"},
|
|
{"source": "2", "target": "3"},
|
|
{"source": "4", "target": "5"},
|
|
{"source": "4", "target": "6"},
|
|
{"source": "5", "target": "6"},
|
|
{"source": "7", "target": "13"},
|
|
{"source": "8", "target": "14"},
|
|
{"source": "9", "target": "10"},
|
|
{"source": "10", "target": "22"},
|
|
{"source": "10", "target": "14"},
|
|
{"source": "10", "target": "12"},
|
|
{"source": "10", "target": "24"},
|
|
{"source": "10", "target": "21"},
|
|
{"source": "10", "target": "20"},
|
|
{"source": "11", "target": "24"},
|
|
{"source": "11", "target": "22"},
|
|
{"source": "11", "target": "14"},
|
|
{"source": "12", "target": "13"},
|
|
{"source": "16", "target": "17"},
|
|
{"source": "16", "target": "18"},
|
|
{"source": "16", "target": "21"},
|
|
{"source": "16", "target": "22"},
|
|
{"source": "17", "target": "18"},
|
|
{"source": "17", "target": "20"},
|
|
{"source": "18", "target": "19"},
|
|
{"source": "19", "target": "20"},
|
|
{"source": "19", "target": "33"},
|
|
{"source": "19", "target": "22"},
|
|
{"source": "19", "target": "23"},
|
|
{"source": "20", "target": "21"},
|
|
{"source": "21", "target": "22"},
|
|
{"source": "22", "target": "24"},
|
|
{"source": "22", "target": "25"},
|
|
{"source": "22", "target": "26"},
|
|
{"source": "22", "target": "23"},
|
|
{"source": "22", "target": "28"},
|
|
{"source": "22", "target": "30"},
|
|
{"source": "22", "target": "31"},
|
|
{"source": "22", "target": "32"},
|
|
{"source": "22", "target": "33"},
|
|
{"source": "23", "target": "28"},
|
|
{"source": "23", "target": "27"},
|
|
{"source": "23", "target": "29"},
|
|
{"source": "23", "target": "30"},
|
|
{"source": "23", "target": "31"},
|
|
{"source": "23", "target": "33"},
|
|
{"source": "32", "target": "33"}
|
|
]
|
|
};
|
|
|
|
data.edges.forEach((edge, i) => {
|
|
edge.id = i;
|
|
});
|
|
const circularLayout = new Circular({
|
|
center: [ 250, 150 ],
|
|
radius: 100,
|
|
ordering: null
|
|
});
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 500,
|
|
height: 300,
|
|
plugins: [ circularLayout ],
|
|
defaultNode: {
|
|
size: [20, 20],
|
|
color: 'steelblue'
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
color: '#e2e2e2'
|
|
},
|
|
nodeStyle: {
|
|
default: {
|
|
lineWidth: 2,
|
|
fill: '#fff'
|
|
}
|
|
},
|
|
edgeStyle: {
|
|
default: {
|
|
endArrow: {
|
|
path: 'M 4,0 L -4,-4 L -4,4 Z',
|
|
d: 4
|
|
}
|
|
}
|
|
}
|
|
});
|
|
graph.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
|
|
edge.id = 'edge' + i;
|
|
return Object.assign({}, edge);
|
|
}) });
|
|
circularLayout.layout(data);
|
|
graph.render();
|
|
|
|
|
|
const spiralLayout = new Circular({
|
|
center: [ 250, 150 ],
|
|
startRadius: 10,
|
|
endRadius: 140,
|
|
startAngle: Math.PI / 4,
|
|
endAngle: 3 * Math.PI,
|
|
clockwise: false,
|
|
ordering: 'topology'
|
|
});
|
|
const graphSpiral = new G6.Graph({
|
|
container: 'mountNode2',
|
|
width: 500,
|
|
height: 300,
|
|
plugins: [ spiralLayout ],
|
|
defaultNode: {
|
|
size: [20, 20],
|
|
color: 'steelblue'
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
color: '#e2e2e2'
|
|
},
|
|
nodeStyle: {
|
|
default: {
|
|
lineWidth: 2,
|
|
fill: '#fff'
|
|
}
|
|
},
|
|
edgeStyle: {
|
|
default: {
|
|
endArrow: {
|
|
path: 'M 4,0 L -4,-4 L -4,4 Z',
|
|
d: 4
|
|
}
|
|
}
|
|
}
|
|
});
|
|
graphSpiral.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
|
|
edge.id = 'edge' + i;
|
|
return Object.assign({}, edge);
|
|
}) });
|
|
spiralLayout.layout(data);
|
|
graphSpiral.render();
|
|
|
|
|
|
const circularDividedLayout = new Circular({
|
|
center: [ 250, 150 ],
|
|
radius: 100,
|
|
startAngle: Math.PI / 4,
|
|
endAngle: Math.PI,
|
|
divisions: 5,
|
|
ordering: 'degree'
|
|
});
|
|
const graphDivided = new G6.Graph({
|
|
container: 'mountNode2',
|
|
width: 500,
|
|
height: 300,
|
|
plugins: [ circularDividedLayout ],
|
|
defaultNode: {
|
|
size: [20, 20],
|
|
color: 'steelblue'
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
color: '#e2e2e2'
|
|
},
|
|
nodeStyle: {
|
|
default: {
|
|
lineWidth: 2,
|
|
fill: '#fff'
|
|
}
|
|
},
|
|
edgeStyle: {
|
|
default: {
|
|
endArrow: {
|
|
path: 'M 4,0 L -4,-4 L -4,4 Z',
|
|
d: 4
|
|
}
|
|
}
|
|
}
|
|
});
|
|
graphDivided.data({ nodes: data.nodes, edges: data.edges.map((edge, i) => {
|
|
edge.id = 'edge' + i;
|
|
return Object.assign({}, edge);
|
|
}) });
|
|
circularDividedLayout.layout(data);
|
|
graphDivided.render();
|
|
</script>
|
|
</body>
|
|
</html>
|