G6 图表示例
源码
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>节点方法</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script type="text/javascript">
12
      $('body').prepend('<button id="getEdges">getEdges</button>   <button id="getLinkNodes">getLinkNodes</button>   <button id="getUnLinkNodes">getUnLinkNodes</button>   <button id="getRelativeItems">getRelativeItems</button>   <button id="getUnRelativeItems">getUnRelativeItems</button>   ')
13
      var Util = G6.Util;
14
      // 第三步：设置数据
15
      var data = {
16
        "source": {
17
          "nodes": [
18
            {
19
              "shape": "rect",
20
              "label": "节点",
21
              "id": "keyNode",
22
              "x": 710,
23
              "y": 260,
24
              "color": "#FF9D2D"
25
            },
26
            {
27
              "shape": "rect",
28
              "label": "节点1",
29
              "x": 780,
30
              "y": 150,
31
              "id": "f7171de1"
32
            },
33
            {
34
              "shape": "rect",
35
              "label": "节点2",
36
              "x": 550,
37
              "y": 210,
38
              "id": "f2201be8"
39
            },
40
            {
41
              "shape": "rect",
42
              "label": "节点3",
43
              "x": 590,
44
              "y": 340,
45
              "id": "b5b421cf"
46
            },
47
            {
48
              "shape": "rect",
49
              "label": "节点4",
50
              "x": 780,
51
              "y": 360,
52
              "id": "a285b5dc"
53
            }
54
          ],
55
          "edges": [
56
            {
57
              "shape": "arrow",
58
              "source": "keyNode",
59
              "target": "f2201be8",
60
              "id": "672f31fc"
61
            },
62
            {
63
              "shape": "arrow",
64
              "source": "keyNode",
65
              "target": "b5b421cf",
66
              "id": "62ed8cb2"
67
            },
68
            {
69
              "shape": "arrow",
70
              "source": "b5b421cf",
71
              "target": "keyNode",
72
              "id": "4542e914",
73
              "controlPoints": [
74
                {
75
                  "x": 590,
76
                  "y": 324
77
                },
78
                {
79
                  "x": 590,
80
                  "y": 260
81
                },
82
                {
83
                  "x": 679,
84
                  "y": 260
85
                }
86
              ]
87
            },
88
            {
89
              "shape": "smoothArrow",
90
              "source": "f7171de1",
91
              "target": "keyNode",
92
              "id": "58624bdb",
93
              "controlPoints": [
94
                {
95
                  "x": 749,
96
                  "y": 150
97
                },
98
                {
99
                  "x": 700,
100
                  "y": 150
101
                },
102
                {
103
                  "x": 710,
104
                  "y": 244
105
                }
106
              ]
107
            },
108
            {
109
              "shape": "arrow",
110
              "source": "f7171de1",
111
              "target": "a285b5dc",
112
              "id": "f119308c"
113
            }
114
          ]
115
        }
116
      };
117
      // 第四步：配置G6画布
118
      var net = new G6.Net({
119
        id: 'c1',      // 容器ID
120
        fitView: 'autoZoom',
121
        mode: 'none',
122
        width: 500,    // 画布宽
123
        height: 500    // 画布高
124
      });
125
      // 第五步：载入数据
126
      net.read(Util.clone(data));
127
      // 第六步：渲染关系图
128
      net.render();
129
      $('#getEdges').on('click', function(){
130
        reRender(); // 重新渲染
131
        var keyNode = net.find('keyNode');
132
        var edges = keyNode.getEdges();
133
        Util.each(edges, function(edge){
134
          net.update(edge, {
135
            color: '#00B07C'
136
          });
137
        });
138
        net.refresh();
139
      });
140
      $('#getLinkNodes').on('click', function(){
141
        reRender(); // 重新渲染
142
        var keyNode = net.find('keyNode');
143
        var nodes = keyNode.getLinkNodes();
144
        Util.each(nodes, function(node){
145
          net.update(node, {
146
            color: '#00B07C'
147
          });
148
        });
149
        net.refresh();
150
      });
151
      $('#getUnLinkNodes').on('click', function(){
152
        reRender(); // 重新渲染
153
        var keyNode = net.find('keyNode');
154
        var nodes = keyNode.getUnLinkNodes();
155
        Util.each(nodes, function(node){
156
          net.update(node, {
157
            color: '#00B07C'
158
          });
159
        });
160
        net.refresh();
161
      });
162
      $('#getRelativeItems').on('click', function(){
163
        reRender(); // 重新渲染
164
        var keyNode = net.find('keyNode');
165
        var items = keyNode.getRelativeItems();
166
        Util.each(items, function(item){
167
          net.update(item, {
168
            color: '#00B07C'
169
          });
170
        });
171
        net.refresh();
172
      });
173
      $('#getUnRelativeItems').on('click', function(){
174
        reRender(); // 重新渲染
175
        var keyNode = net.find('keyNode');
176
        var items = keyNode.getUnRelativeItems();
177
        Util.each(items, function(item){
178
          net.update(item, {
179
            color: '#00B07C'
180
          });
181
        });
182
        net.refresh();
183
      });
184
      function reRender(){
185
        net.clear();
186
        net.read(Util.clone(data));
187
        net.render();
188
      }
189
    </script>
190
  </body>
191
</html>
192
​

节点方法