g6+vue+iview 实现将iview控件编排到g6中

最近通过G6画图，需要将iview里面的控件编排到g6的图标中
第一步:
注册dom节点组件
通过v-show 将 控件隐藏到界面内,
通过document.getElementById(“btn”)获取控件innerHTML
将html变量赋值给组件的html属性,
第二步:
设置graph的renderer属性为"svg"
第三步:
节点绑定shape 类型为自己注册的节点

	 console.log(document.getElementById("btn"));
      G6.registerNode("switch-node", {
        draw: (cfg, group) => {
          const stroke = cfg.style ? cfg.style.stroke || "#5B8FF9" : "#5B8FF9";
          const shape = group.addShape("dom", {
            attrs: {
              width: 50,
              height: 25,
              html: document.getElementById("btn").innerHTML
            },
            draggable: true
          });
          return shape;
        }
      });

<template>
  <div id="mountNode">
    <div id="btn" v-show="false">
      <i-switch ref="btn" />
    </div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
export default {
  name: "liquid_level_warning_index",
  data() {
    return {
      nodeDatas: {
        hydraulicLiftingDevice: 0
      },
      nodesData: [
        {
          switch: 1,
          name: "S 液压升降装置",
          level: "down"
        },
        {
          switch: 1,
          name: "1#首侧推",
          level: "down"
        },
        {
          switch: 1,
          name: "G1",
          level: "up"
        },
        {
          switch: 1,
          name: "1#舵机",
          level: "down"
        },
        {
          switch: 1,
          name: "T1",
          level: "down"
        },
        {
          switch: 1,
          name: "G2",
          level: "up"
        },
        {
          switch: 1,
          name: "T2",
          level: "down"
        },
        {
          switch: 1,
          name: "2#舵机",
          level: "down"
        },
        {
          switch: 1,
          name: "G3",
          level: "up"
        },
        {
          switch: 1,
          name: "2#首侧推",
          level: "down"
        },
        {
          switch: 1,
          name: "岸电",
          level: "null"
        }
      ],
      nodes: [
        {
          id: -3,
          x: 100,
          y: 200,
          size: [3]
        }
      ],
      edges: []
    };
  },
  created() {
    //不能在created方法中初始化
    //this.initG6()
  },
  mounted() {
    this.calData();
    this.initG6();
  },
  methods: {
    calData() {
      for (var i = 0; i < this.nodesData.length; i++) {
        this.edges.push({ target: (i * 3).toString(), source: ((i - 1) * 3).toString()});
        this.edges.push({ target: (i * 3 + 1).toString(), source: (i * 3).toString()});
        this.edges.push({ target: (i * 3 + 2).toString(), source: (i * 3 + 1).toString()});
        if (this.nodesData[i].level === "down") {
          this.nodes.push({
            id: (i * 3).toString(),
            x: i * 90 + 150,
            y: 200,
            size: [3]
          });
          this.nodes.push({
            id: (i * 3 + 1).toString(),
            x: i * 90 + 150,
            y: 300,
            type: "switch-node"
          });
          this.nodes.push({
            id: (i * 3 + 2).toString(),
            x: i * 90 + 150,
            y: 400,
            type: "Circle",
            size: [30, 30],
            label: this.nodesData[i].name
          });
          /* {
          target: "2",
          source: "1"
        },
        {
          target: "3",
          source: "2"
        },
        {
          target: "4",
          source: "3"
        },*/
        }
        if (this.nodesData[i].level === "up") {
          this.nodes.push({
            id: i * 3,
            x: i * 50 + 150,
            y: 200,
            size: [3]
          });
          this.nodes.push({
            id: i * 3 + 1,
            x: i * 50 + 150,
            y: 120,
            type: "switch-node"
          });
          this.nodes.push({
            id: i * 3 + 2,
            x: i * 50 + 150,
            y: 50,
            type: "Circle",
            size: [30, 30],
            label: this.nodesData[i].name
          });
        }
        if (this.nodesData[i].level === "null") {
          this.nodes.push({
            id: i * 3,
            x: i * 90 + 150,
            y: 200,
            size: [3]
          });
          this.nodes.push({
            id: i * 3 + 1,
            x: (i + 1) * 90 + 150,
            y: 200,
            type: "switch-node"
          });
          this.nodes.push({
            id: i * 3 + 2,
            x: (i + 3) * 90 + 150,
            y: 200,
            type: "Circle",
            size: [40, 40],
            label: this.nodesData[i].name
          });
        }
      }
      console.log(this.edges);
      console.log(this.nodes);
    },
    initG6() {
      const data = {
        nodes: this.nodes,
        edges: this.edges
      };
      console.log(document.getElementById("btn"));
      G6.registerNode("switch-node", {
        draw: (cfg, group) => {
          const stroke = cfg.style ? cfg.style.stroke || "#5B8FF9" : "#5B8FF9";
          const shape = group.addShape("dom", {
            attrs: {
              width: 50,
              height: 25,
              html: document.getElementById("btn").innerHTML
            },
            draggable: true
          });
          return shape;
        }
      });
      const graph = new G6.Graph({
        container: "mountNode",
        width: window.innerWidth,
        height: window.innerHeight,
        renderer: "svg",
        defaultEdge: {
          style: {
            stroke: "#e2e2e2"
          }
        }
      });
      graph.read(data);
    }
  }
};
</script>