Skip to content

Commit 8ae20c9

Browse files
eosforeosfor
committed
update force directed to include legend based on obj type and fix a bug with links not following nodes
1 parent 6ec4c64 commit 8ae20c9

1 file changed

Lines changed: 68 additions & 63 deletions

File tree

‎PSGraph.Vega.Extensions/Assets/vega.force.directed.layout.json‎

Lines changed: 68 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,28 @@
77
{"name": "link-data", "source": "link-data-raw"},
88
{
99
"name": "node-data",
10-
"values": [],
1110
"transform": [
1211
{
13-
"type": "force",
14-
"iterations": 300,
15-
"restart": {"signal": "restart"},
1612
"signal": "force",
13+
"type": "force",
1714
"forces": [
1815
{"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}},
1916
{
2017
"force": "collide",
21-
"radius": {"signal": "2 * nodeRadius"},
2218
"iterations": 1,
19+
"radius": {"signal": "2 * nodeRadius"},
2320
"strength": 0.7
2421
},
2522
{"force": "nbody", "strength": {"signal": "nodeCharge"}},
2623
{
2724
"force": "link",
28-
"links": "link-data-raw",
2925
"distance": {"signal": "linkDistance"},
30-
"id": "index"
26+
"id": "index",
27+
"links": "link-data-raw"
3128
}
32-
]
29+
],
30+
"iterations": 300,
31+
"restart": {"signal": "restart"}
3332
},
3433
{
3534
"type": "formula",
@@ -41,7 +40,8 @@
4140
"as": "fy",
4241
"expr": "fix[1]!=null && node==datum.index ?invert('yscale',fix[1]):null"
4342
}
44-
]
43+
],
44+
"values": []
4545
},
4646
{
4747
"name": "adj-nodes",
@@ -68,7 +68,6 @@
6868
],
6969
"marks": [
7070
{
71-
"name": "links",
7271
"from": {"data": "link-data"},
7372
"type": "path",
7473
"encode": {
@@ -80,6 +79,7 @@
8079
}
8180
},
8281
"interactive": false,
82+
"name": "links",
8383
"transform": [
8484
{
8585
"type": "linkpath",
@@ -97,27 +97,27 @@
9797
"type": "symbol",
9898
"encode": {
9999
"enter": {
100-
"fill": { "signal": "datum.nodeType === 'BaristaLabs.ChromeDevTools.Runtime.Network.RequestWillBeSentEvent'? '#e0e1dd' : scale('color', datum.group)" },
100+
"fill": {"signal": "scale('color', datum.nodeType)"},
101101
"stroke": {"value": "white"}
102102
},
103103
"update": {
104104
"cursor": {"value": "pointer"},
105105
"fill": {
106-
"signal": "hoverIndex === datum.index || indata('adjacentIndices', 'adj', datum.index) ? 'red' : datum.nodeType === 'BaristaLabs.ChromeDevTools.Runtime.Network.RequestWillBeSentEvent'? '#e0e1dd' : scale('color', datum.group)"
106+
"signal": "hoverIndex === datum.index || indata('adjacentIndices', 'adj', datum.index) ? 'red' : scale('color', datum.nodeType)"
107107
},
108108
"size": {
109109
"signal": "(hoverIndex === datum.index || indata('adjacentIndices', 'adj', datum.index)) ? 2.5 * nodeRadius * nodeRadius : 2 * nodeRadius * nodeRadius"
110110
},
111-
"zindex": {
112-
"signal": "(hoverIndex === datum.index || indata('adjacentIndices', 'adj', datum.index)) ? 10 : 1"
113-
},
111+
"tooltip": {"signal": "{ name: datum.name }"},
114112
"x": {
115113
"signal": "fix[0]!=null && node===datum.index ?fix[0]:scale('xscale', datum.x)"
116114
},
117115
"y": {
118116
"signal": "fix[1]!=null && node===datum.index ?fix[1]:scale('yscale', datum.y)"
119117
},
120-
"tooltip": {"signal": "{ name: datum.name }"}
118+
"zindex": {
119+
"signal": "(hoverIndex === datum.index || indata('adjacentIndices', 'adj', datum.index)) ? 10 : 1"
120+
}
121121
}
122122
},
123123
"name": "nodes",
@@ -126,22 +126,22 @@
126126
],
127127
"scales": [
128128
{
129-
"domain": {"data": "node-data", "field": "group"},
129+
"domain": {"data": "node-data", "field": "nodeType"},
130130
"name": "color",
131131
"type": "ordinal",
132132
"range": {"scheme": "category10"}
133133
},
134134
{
135-
"name": "xscale",
136-
"zero": false,
137135
"domain": {"signal": "xdom"},
138-
"range": {"signal": "xrange"}
136+
"name": "xscale",
137+
"range": {"signal": "xrange"},
138+
"zero": false
139139
},
140140
{
141-
"name": "yscale",
142-
"zero": false,
143141
"domain": {"signal": "ydom"},
144-
"range": {"signal": "yrange"}
142+
"name": "yscale",
143+
"range": {"signal": "yrange"},
144+
"zero": false
145145
}
146146
],
147147
"signals": [
@@ -151,7 +151,6 @@
151151
{"name": "yext", "update": "[height, 0]"},
152152
{
153153
"name": "down",
154-
"value": null,
155154
"on": [
156155
{"events": "mouseup,touchend", "update": "null"},
157156
{"events": "mousedown, touchstart", "update": "xy()"},
@@ -160,59 +159,56 @@
160159
},
161160
{
162161
"name": "xcur",
163-
"value": null,
164162
"on": [{"events": "mousedown, touchstart, touchend", "update": "xdom"}]
165163
},
166164
{
167165
"name": "ycur",
168-
"value": null,
169166
"on": [{"events": "mousedown, touchstart, touchend", "update": "ydom"}]
170167
},
171168
{
172169
"name": "delta",
173-
"value": [0, 0],
174170
"on": [
175171
{
176172
"events": [
177173
{
178-
"source": "window",
179-
"type": "mousemove",
180-
"consume": true,
181174
"between": [
182175
{"type": "mousedown"},
183176
{"source": "window", "type": "mouseup"}
184-
]
177+
],
178+
"consume": true,
179+
"source": "window",
180+
"type": "mousemove"
185181
},
186182
{
187-
"type": "touchmove",
188183
"consume": true,
189-
"filter": "event.touches.length === 1"
184+
"filter": "event.touches.length === 1",
185+
"type": "touchmove"
190186
}
191187
],
192188
"update": "down ? [down[0]-x(), y()-down[1]] : [0,0]"
193189
}
194-
]
190+
],
191+
"value": [0, 0]
195192
},
196193
{
197194
"name": "anchor",
198-
"value": [0, 0],
199195
"on": [
200196
{
201197
"events": "wheel",
202198
"update": "[invert('xscale', x()), invert('yscale', y())]"
203199
},
204200
{
205201
"events": {
206-
"type": "touchstart",
207-
"filter": "event.touches.length===2"
202+
"filter": "event.touches.length===2",
203+
"type": "touchstart"
208204
},
209205
"update": "[(xdom[0] + xdom[1]) / 2, (ydom[0] + ydom[1]) / 2]"
210206
}
211-
]
207+
],
208+
"value": [0, 0]
212209
},
213210
{
214211
"name": "zoom",
215-
"value": 1,
216212
"on": [
217213
{
218214
"events": "wheel!",
@@ -225,39 +221,39 @@
225221
"update": "dist1 / dist2"
226222
},
227223
{"events": [{"source": "view", "type": "dblclick"}], "update": "1"}
228-
]
224+
],
225+
"value": 1
229226
},
230227
{
231228
"name": "dist1",
232-
"value": 0,
233229
"on": [
234230
{
235231
"events": {
236-
"type": "touchstart",
237-
"filter": "event.touches.length===2"
232+
"filter": "event.touches.length===2",
233+
"type": "touchstart"
238234
},
239235
"update": "pinchDistance(event)"
240236
},
241237
{"events": {"signal": "dist2"}, "update": "dist2"}
242-
]
238+
],
239+
"value": 0
243240
},
244241
{
245242
"name": "dist2",
246-
"value": 0,
247243
"on": [
248244
{
249245
"events": {
250-
"type": "touchmove",
251246
"consume": true,
252-
"filter": "event.touches.length===2"
247+
"filter": "event.touches.length===2",
248+
"type": "touchmove"
253249
},
254250
"update": "pinchDistance(event)"
255251
}
256-
]
252+
],
253+
"value": 0
257254
},
258255
{
259256
"name": "xdom",
260-
"update": "xext",
261257
"on": [
262258
{
263259
"events": {"signal": "delta"},
@@ -268,11 +264,11 @@
268264
"update": "[anchor[0] + (xdom[0] - anchor[0]) * zoom, anchor[0] + (xdom[1] - anchor[0]) * zoom]"
269265
},
270266
{"events": [{"source": "view", "type": "dblclick"}], "update": "xrange"}
271-
]
267+
],
268+
"update": "xext"
272269
},
273270
{
274271
"name": "ydom",
275-
"update": "yext",
276272
"on": [
277273
{
278274
"events": {"signal": "delta"},
@@ -283,18 +279,19 @@
283279
"update": "[anchor[1] + (ydom[0] - anchor[1]) * zoom, anchor[1] + (ydom[1] - anchor[1]) * zoom]"
284280
},
285281
{"events": [{"source": "view", "type": "dblclick"}], "update": "yrange"}
286-
]
282+
],
283+
"update": "yext"
287284
},
288285
{"name": "size", "update": "clamp(20 / span(xdom), 1, 1000)"},
289286
{
290287
"name": "cx",
291-
"update": "width / 2",
292288
"on": [
293289
{
294290
"events": "[symbol:mousedown, window:mouseup] > window:mousemove",
295291
"update": " cx==width/2?cx+0.001:width/2"
296292
}
297-
]
293+
],
294+
"update": "width / 2"
298295
},
299296
{"name": "cy", "update": "height / 2"},
300297
{"name": "w", "value": 1200},
@@ -326,24 +323,23 @@
326323
{
327324
"description": "State variable for active node fix status.",
328325
"name": "fix",
329-
"value": false,
330326
"on": [
331327
{
332328
"events": "symbol:mouseout[!event.buttons], window:mouseup",
333329
"update": "false"
334330
},
335-
{"events": "symbol:mouseover", "update": "fix || true", "force": true},
331+
{"events": "symbol:mouseover", "force": true, "update": "fix || true"},
336332
{
337333
"events": "[symbol:mousedown, window:mouseup] > window:mousemove!",
338-
"update": "xy()",
339-
"force": true
334+
"force": true,
335+
"update": "xy()"
340336
}
341-
]
337+
],
338+
"value": false
342339
},
343340
{
344341
"description": "Graph node most recently interacted with.",
345342
"name": "node",
346-
"value": null,
347343
"on": [
348344
{
349345
"events": "symbol:mouseover",
@@ -354,12 +350,21 @@
354350
{
355351
"description": "Flag to restart Force simulation upon data changes.",
356352
"name": "restart",
357-
"value": false,
358-
"on": [{"events": {"signal": "fix"}, "update": "fix && fix.length"}]
353+
"on": [{"events": {"signal": "fix"}, "update": "fix && fix.length"}],
354+
"value": false
355+
}
356+
],
357+
"legends": [
358+
{
359+
"fill": "color",
360+
"title": "Color codes",
361+
"direction": "vertical",
362+
"labelLimit": 0
359363
}
360364
],
361365
"$schema": "https://vega.github.io/schema/vega/v6.json",
362-
"autosize": {"type": "none"},
366+
"autosize": {"type": "pad", "resize": true, "contains": "padding"},
367+
"padding": {"right": 260},
363368
"description": "A node-link diagram with force-directed layout",
364369
"height": {"signal": "h"},
365370
"width": {"signal": "w"}

0 commit comments

Comments
 (0)