HTML 5 (canvase) 토폴로지, 관계 도 및 vis. js 관계 도 사용

import vis from 'vis';   
     
const vis=require("vis");

 // vis      
  public init(body: any) {
    /**         */
    let dataArr: any = [];
    /**  links    */
    let linksArr: any = [];
    /**          */
    //    
    body.forEach((item: any, index: number) => {
      // if (index < 20) {
      let obj: any = {
        id: "",
        shape: "dot",
        color: "",
        label: ""
      };
      let objB: any = {
        id: "",
        shape: "dot",
        color: "",
        label: ""
      };
      obj.id = item.asfzh;
      obj.label = item.asfzh;
      obj.color = item.sfzZdrFlag1 === 1 ? "#f7220b" : "#2aa2f7";
      dataArr.push(obj);
      objB.id = item.bsfzh;
      objB.label = item.bsfzh;
      objB.color = item.sfzZdrFlag2 === 1 ? "#f7220b" : "#2aa2f7";
      dataArr.push(objB);
    });

    //  
    body.forEach((item: any, index: number) => {
      // if (index < 20) {
      let linksObj: any = {
        from: "",
        to: "",
        label: "",
        font: {align: "top",color:"from"},
        arrows: "to"
      };
      linksObj.from = item.asfzh;
      linksObj.to = item.bsfzh;
      linksObj.label = `${item.cnt}`;   //            
      linksArr.push(linksObj);
    });
    let strArr = [];
    let objArr = [];
    for (let i = 0; i < dataArr.length; i++) {
      if (strArr.indexOf(dataArr[i].id) == -1) {
        strArr.push(dataArr[i].id);
        objArr.push(dataArr[i]);
      }
    }

    const container = document.getElementById("network_id");
    let nodes = objArr;
    let edges = linksArr;
    const data = {
      nodes: nodes,
      edges: edges
    };
    //   
    const options = {
      autoResize: true,
      // physics:false,
      nodes: {
        shape: "dot",
        size: 12,
        font: {
          size: 12,
          color:'#8e8e8e'
        },
      },
      edges: {
        width: 1,
        smooth: {
          //              
          enabled: true //   true，   false  ，              ，         
        },
        font:{
          color:'#8e8e8e',
          strokeWidth: 0
        }
      },
      interaction: {
        dragNodes: true, //       
        dragView: true, //       
        hover: true, //              
        multiselect: true, //  ctrl   
        selectable: true, //        
        selectConnectedEdges: true, //            
        hoverConnectedEdges: true, //              
        zoomView: true //       
      },
    };
    let network = new Vis.Network(container, data, options);
  }