(g6)Radial 辐射布局

(g6)Radial 辐射布局

效果

数据格式

节点

边

代码

	//图谱区域
	<div class="bigDiv-left">
      <div id="container"></div>
    </div>
    
	data() {
	    return { 
	      detailData: {
	        nodes: [],
	        edges: [],
	      },
	      graphDetail: null,
	    };
	  },
    mounted() { 
    	this.containerDetail(); //辐射图
  	},
  	//方法
    containerDetail() {
      //1.图数据
      g6test42.entitys.forEach((item) => {
        if (item.dimension == "Jar") {
          this.$set(item, "color", "#2e75b6"); //特定节点赋颜色
        } else {
          this.$set(item, "color", "#9dc3e6");
        }
        let obj1 = {};
        obj1 = {
          id: item.vertex,
          label: this.superLongTextHandle(item.vertex, 50, 12),//换行符处理超长文本
          state: item.dimension,
          style: {
            fill: item.color,
          },
        };
        this.detailData.nodes.push(obj1);
      });
      g6test42.edges.forEach((item) => {
        let obj2 = {};
        obj2 = {
          source: item.source,
          target: item.target,
          label: item.dimension, 
        };
        this.detailData.edges.push(obj2);
      });
      //2.创建关系图
      if (this.graphDetail) {
        this.graphDetail.destroy();
      }
      const width = document.querySelector("#container").clientWidth;
      const height = document.querySelector("#container").clientHeight;
      this.graphDetail = new G6.Graph({
        container: "container",
        width,
        height,
        fitView: true,
        modes: {
          default: ["zoom-canvas", "drag-canvas", "drag-node"],
        },
        layout: {
          type: "radial",
          maxIteration: 200,
          linkDistance: 200,
          preventOverlap: true,
          nodeSize: 50,
          nodeSpacing: 200,
          direction: "LR",
        },
        animate: true,
        defaultNode: {
          type: "copy-node",
          size: 50,
          labelCfg: {
            style: {
              fill: "#fff",
              fontStyle: "bold",
              fontSize: 12,
            },
          },
          style: {
            fill: "#2e75b6",
            stroke: "#ccc",
            lineWidth: 2,
          },
        },
        defaultEdge: {
          labelCfg: {
            label: "line",
            refY: 10,
            autoRotate: true,
          },
          style: {
            lineWidth: 1,
            stroke: "#ccc",
            endArrow: true,
          },
        }, 
      });
      //3.配置数据源，渲染
      this.graphDetail.data(this.detailData);
      this.graphDetail.render(); 
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104