AntVG6(生态辐射树)+vue的使用方法

AntVG6(生态辐射树)+vue的使用方法

参照官网教程 ：https://www.yuque.com/antv/g6/intro
1.安装依赖
npm install --save @antv/g6

2.在需要用的 G6 的 JS 文件中导入
import G6 from ‘@antv/g6’
3.创建xxx.vue(利用json文件导入的方式实现)
algorithm-category.json

{
     "id": "Modeling Methods",
    "children": [
      {
        "id": "Classification",
        "children": [
          {
            "id": "Logistic regression"
          },
          {
            "id": "Linear discriminant analysis"
          },
          {
            "id": "Rules"
          },
          {
            "id": "Decision trees"
          },
          {
            "id": "Naive Bayes"
          },
          {
            "id": "K nearest neighbor"
          },
          {
            "id": "Probabilistic neural network"
          },
          {
            "id": "Support vector machine"
          }
        ]
      },
      {
        "id": "Consensus",
        "children": [
          {
            "id": "Models diversity",
            "children": [
              {
                "id": "Different initializations"
              },
              {
                "id": "Different parameter choices"
              },
              {
                "id": "Different architectures"
              },
              {
                "id": "Different modeling methods"
              },
              {
                "id": "Different training sets"
              },
              {
                "id": "Different feature sets"
              }
            ]
          },
          {
            "id": "Methods",
            "children": [
              {
                "id": "Classifier selection"
              },
              {
                "id": "Classifier fusion"
              }
            ]
          },
          {
            "id": "Common",
            "children": [
              {
                "id": "Bagging"
              },
              {
                "id": "Boosting"
              },
              {
                "id": "AdaBoost"
              }
            ]
          }
        ]
      },
      {
        "id": "Regression",
        "children": [
          {
            "id": "Multiple linear regression"
          },
          {
            "id": "Partial least squares"
          },
          {
            "id": "Multi-layer feedforward neural network"
          },
          {
            "id": "General regression neural network"
          },
          {
            "id": "Support vector regression"
          }
        ]
      }
    ]
  }

xxx.vue

<template>
  <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
insertCss(`
  .g6-minimap-container {
    border: 1px solid #e2e2e2;
  }
  .g6-minimap-viewport {
    border: 2px solid rgb(25, 128, 255);
  }
  .g6-component-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
`);
export default {
    
  name: "antV",
  data() {
    
    return {
    };
  },
  computed: {
    },
  methods: {
    
    init() {
    
      fetch("../static/algorithm-category.json")
        .then(res => res.json())
        .then(data => {
    
          const container = document.getElementById("mountNode");
          const width