test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-06 05:38:47 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity
9e9a13edd6
g6/demos/layout-method-translation.html

487 lines
8.9 KiB
HTML
Raw Normal View History

feat: innter layouts
2019-09-16 19:14:39 +08:00
<!DOCTYPE html>
<html lang="en">
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<head>
feat: innter layouts
2019-09-16 19:14:39 +08:00
<meta charset="UTF-8">
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<title>Change Layouts</title>
</head>
feat: innter layouts
2019-09-16 19:14:39 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<body>
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
<div id="tip">Random Layout</div>
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
<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"
}]
};
feat: innter layouts
2019-09-16 19:14:39 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
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: {
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
}
}
feat: innter layouts
2019-09-16 19:14:39 +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
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
const tipDIv = document.getElementById('tip');
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
layoutMethodsTranslation();
setInterval(() => {
layoutMethodsTranslation();
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
}, 10500);
fix: transfer in layouts demo
2019-09-17 13:18:12 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
function layoutMethodsTranslation() {
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'MDS Layout';
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('mds');
}, 1000);
fix: transfer in layouts demo
2019-09-17 13:18:12 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'Fruchterman Layout';
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('fruchterman');
}, 2500);
fix: transfer in layouts demo
2019-09-17 13:18:12 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'Force-directed Layout';
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({
type: 'force',
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
linkDistance: 50,
preventOverlap: true,
nodeSize: 30
});
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
}, 4500);
fix: transfer in layouts demo
2019-09-17 13:18:12 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'Circular Layout';
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({
type: 'circular',
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
radius: 100,
startAngle: Math.PI / 4,
endAngle: Math.PI,
divisions: 5,
ordering: 'degree'
});
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
}, 7000);
fix: radial layout unitRadius bug; fix: force layout updateCfg ticking bug
2019-09-19 11:34:22 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'Radial Layout';
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({
type: 'radial',
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
preventOverlap: true,
nodeSize: 20
});
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
}, 8500);
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
setTimeout(() => {
fix: force layout node size problem. add: bubbles demo. add: arc-diagram demo. add: circular arc diagram demo. add: custom bigraph layout demo. add: visual mapping demo
2019-09-25 17:25:22 +08:00
tipDIv.innerHTML = 'Random Layout';
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({
type: 'random',
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
preventOverlap: true,
nodeSize: 20
});
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
}, 10000);
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
}
</script>
</body>
fix: radial layout unitRadius bug; fix: force layout updateCfg ticking bug
2019-09-19 11:34:22 +08:00
add: layout demos. fix: format of all demos.
2019-09-24 11:30:15 +08:00
</html>
Reference in New Issue Copy Permalink