Radial 布局参数变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radial 布局参数变化</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script>
  /**
   * 该示例演示 Radial 布局的参数及其使用，以及布局参数的切换
   * Radial 算法原文：http://jgaa.info/accepted/2011/BrandesPich2011.15.1.pdf
   * by 十吾
   */
  var 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"
  }]
  };

var descriptionDiv = document.createElement("div");
  descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 50，未防止重叠';
  var graphDiv = document.getElementById("mountNode");
  document.body.insertBefore(descriptionDiv, graphDiv);

layoutConfigTranslation();

setInterval(function() {
    layoutConfigTranslation();
  }, 7000);

function layoutConfigTranslation() {
    setTimeout(function() {
      descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 50，防止重叠';
      graph.updateLayout({
        preventOverlap: true,
        nodeSize: 20
      });
    }, 1000);

setTimeout(function() {
      descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 80，防止重叠';
      graph.updateLayout({
        unitRadius: 80
      });
    }, 2500);

setTimeout(function() {
      descriptionDiv.innerHTML = 'Radial 布局，中心点 = 10，单元半径 = 80，防止重叠';
      graph.updateLayout({
        focusNode: '10'
      });
    }, 4000);

setTimeout(function() {
      descriptionDiv.innerHTML = 'Radial 布局，中心点 = 20，单元半径 = 80，防止重叠';
      graph.updateLayout({
        focusNode: '20'
      });
    }, 5500);

setTimeout(function() {
      descriptionDiv.innerHTML = 'Radial 布局，中心点 = 0，单元半径 = 50，未防止重叠';
      graph.updateLayout({
        focusNode: '0',
        preventOverlap: false,
        unitRadius: 50
      });
    }, 5500);
  }
</script></body>
</html>

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例

Radial 布局参数变化