test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity
b0ee9fe333
g6/demos/layout-radial-config-translation.html

547 lines
10 KiB
HTML
Raw Normal View History

add: layout demos
2019-09-23 20:03:06 +08:00
<!DOCTYPE html>
<html lang="en">
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<head>
add: layout demos
2019-09-23 20:03:06 +08:00
<meta charset="UTF-8">
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<title>Radial Layout with Changing Configurations</title>
</head>
<body>
<div id="description">Radial 布局，中心点 = 0，单元半径 = 50，未防止重叠</div>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
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"
}]
};
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
const data2 = {
"nodes": [{
"id": "0",
"label": "0",
"x": 100,
"y": 20
},
{
"id": "1",
"label": "1",
"x": 10,
"y": 210
},
{
"id": "2",
"label": "2",
"x": 150,
"y": 100
},
{
"id": "3",
"label": "3",
"x": 120,
"y": 100
},
{
"id": "4",
"label": "4",
"x": 50,
"y": 250
},
{
"id": "5",
"label": "5",
"x": 130,
"y": 50
}],
"edges": [{
"id": "e1",
"source": "0",
"target": "1"
},
{
"id": "e2",
"source": "0",
"target": "2"
},
{
"id": "e3",
"source": "0",
"target": "3"
},
{
"id": "e4",
"source": "0",
"target": "4"
},
{
"id": "e5",
"source": "0",
"target": "5"
}]
}
const graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 600,
modes: {
feat: open more configurations of force; fix: sankey diagram updatepositions error problem; fix: format of demos; fix: problems in demos.
2019-09-29 12:11:28 +08:00
default: ['drag-canvas', 'drag-node'],
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
},
layout: {
type: 'radial',
unitRadius: 50,
center: [500, 300]
},
animate: true,
defaultNode: {
size: [20, 20],
color: 'steelblue',
style: {
lineWidth: 2,
fill: '#fff'
}
},
defaultEdge: {
size: 1,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 4,0 L -4,-4 L -4,4 Z',
d: 4
}
add: layout demos
2019-09-23 20:03:06 +08:00
}
}
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
});
graph.data(data);
graph.render();
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
const descriptionDiv = document.getElementById('description');
add: layout demos
2019-09-23 20:03:06 +08:00
layoutConfigTranslation();
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setInterval(() =>{
layoutConfigTranslation();
},
7000);
function layoutConfigTranslation() {
setTimeout(() => {
descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 50，防止重叠';
fix: merge updateLayoutCfg and changeLayout to updateLayout; add: dagre config translation demo; add: fruchterman config translation demo; fix; dagre parameters bug.
2019-09-24 20:15:21 +08:00
graph.updateLayout({
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
preventOverlap: true,
nodeSize: 20
});
},
1000);
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 80，防止重叠';
fix: merge updateLayoutCfg and changeLayout to updateLayout; add: dagre config translation demo; add: fruchterman config translation demo; fix; dagre parameters bug.
2019-09-24 20:15:21 +08:00
graph.updateLayout({
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
unitRadius: 80,
});
},
2500);
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
descriptionDiv.innerHTML = 'Radial 布局，中心点 = 10，单元半径 = 80，防止重叠';
fix: merge updateLayoutCfg and changeLayout to updateLayout; add: dagre config translation demo; add: fruchterman config translation demo; fix; dagre parameters bug.
2019-09-24 20:15:21 +08:00
graph.updateLayout({
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
focusNode: '10',
});
},
4000);
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
descriptionDiv.innerHTML = 'Radial 布局，中心点 = 20，单元半径 = 80，防止重叠';
fix: merge updateLayoutCfg and changeLayout to updateLayout; add: dagre config translation demo; add: fruchterman config translation demo; fix; dagre parameters bug.
2019-09-24 20:15:21 +08:00
graph.updateLayout({
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
focusNode: '20',
});
},
5500);
add: layout demos
2019-09-23 20:03:06 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 50，未防止重叠';
fix: merge updateLayoutCfg and changeLayout to updateLayout; add: dagre config translation demo; add: fruchterman config translation demo; fix; dagre parameters bug.
2019-09-24 20:15:21 +08:00
graph.updateLayout({
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
focusNode: '0',
preventOverlap: false,
unitRadius: 50,
});
},
5500);
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink