g6js+hierarchy实现系统树、紧凑树、脑图三种图表效果代码-html代码-BFW代码库

g6js+hierarchy实现系统树、紧凑树、脑图三种图表效果代码

代码语言：html

所属分类：图表

代码描述：g6js+hierarchy实现系统树、紧凑树、脑图三种图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


  
  
</head>

<body>
<select id="layout">
  <option value="dendrogram">系统树</option>
  <option value="compactBox">紧凑树</option>
  <option value="mindmap">脑图布局</option>
</select>
<div id="mountNode"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hierarchy.0.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/antv.g6-3.0.0.js"></script>
  
      <script id="rendered-js" >
let currentLayout = "dendrogram";
const layouts = {
  dendrogram: function (data) {
    return Hierarchy.dendrogram(data, {
      direction: "LR", // H / V / LR / RL / TB / BT
      nodeSep: 50,
      rankSep: 100 });

  },
  compactBox: function (data) {
    return Hierarchy.compactBox(data, {
      direction: "LR",
      getId(d) {
        return d.id;
      },
      getHeight() {
        return 16;
      },
      getWidth() {
        return 16;
      },
      getVGap() {
        return 50;
      },
      getHGap() {
        return 50;
      } });

  },
  mindmap: function (data) {
    return Hierarchy.mindmap(data, {
      direction: "H",
      getHeight() {
        return 16;
      },
      getWidth() {
        return 16;
      },
      getVGap() {
        return 50;
      },
      getHGap() {
        return 50;
      } });

  } };

const graph = new G6.TreeGraph({
  container: "mountNode",
  width: 500,
  height: 500,
  pixelRatio: 2,
  modes: {
    default: [
    {
      type: "collapse-expand",
      onChange(item, collapsed) {
        const data = item.get("model").data;
        data.collapsed = collapsed;
        return true;
      } },

    "drag-.........完整代码请登录后点击上方下载按钮下载查看