Hey all,
I'm using ELK version 7.13.3
Using the code below, I'm trying to draw nodes connected to networks.
The default fill of the nodes is blue, but when a user is clicking a node, it will be filled with red and the nodes connected to it are supposed to be filled with white (double click to reset).
I have 2 issues, which may be related:
- When trying to use the inspect option, I can't see the "link-data" data set, or the "selected" signal (although, if I comment out the "marks", I will be able to see the "link-data" data set).
- When clicking a node, the nodes connected to it aren't filled in white...
I think the issue is somewhere with the force transform...
I should also note that using the same code did work on ELK 7.7, so I'm not too sure what changed...
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"background": "black",
"config": {"kibana":{"hideWarnings":"true"}}
"padding": {"top": 150, "left": 100, "bottom": 150, "right": 100},
"signals": [
{
"name": "active",
"on": [
{"events": "symbol:click", "update": "datum.node_id"},
{"events": "symbol:dblclick", "update": "{}"}
]
},
{"name": "colorIn", "value": "firebrick"},
{"name": "colorOut", "value": "white"},
],
"data": [
{
"name": "network_properties",
"values": [
{
"NetName": "NetType1",
"net_level": 1,
"color": "#FDFEFE",
"width": 2,
"dashes": [4, 4]
},
{
"NetName": "NetType2",
"net_level": 1,
"color": "#FDFEFE",
"width": 2,
"dashes": [4, 4]
},
]
},
{
"name": "node-data",
"values": [
{
"key": {
"Net": "NetType1",
"node_id": "1"
},
"doc_count": 8,
"node_id": "1",
"Net": "NetType1",
"net_level": 1,
},
{
"key": {
"Net": "NetType2",
"node_id": "1"
},
"doc_count": 8,
"node_id": "1",
"Net": "NetType2",
"net_level": 1,
},
{
"key": {
"Net": "NetType1",
"node_id": "2"
},
"doc_count": 8,
"node_id": "2",
"Net": "NetType1",
"net_level": 1,
}
{
"key": {
"Net": "NetType2",
"node_id": "3"
},
"doc_count": 8,
"node_id": "3",
"Net": "NetType2",
"net_level": 1,
}
]
"transform": [
{"type": "formula", "expr": "datum.key.node_id", "as": "node_id"},
{"type": "formula", "expr": "datum.key.Net", "as": "Net"},
{
"type": "aggregate",
"groupby": ["node_id"],
"fields": ["net_level"],
"ops": ["max"],
"as": ["net_level"]
},
{"type": "identifier", "as": "index"},
{"type": "formula", "expr": "datum.index-1", "as": "index"},
]
},
{
"name": "link-data",
"values":[
{
"Net":"NetType1",
"fromNode":"1"
"toNode":"2"
},
{
"Net":"NetType1",
"fromNode":"2"
"toNode":"1"
},
{
"Net":"NetType2",
"fromNode":"1"
"toNode":"3"
},
{
"Net":"NetType2",
"fromNode":"3"
"toNode":"1"
}
]
"transform": [
{
"type": "formula",
"expr": "datum.Net + ' ' + datum.fromNode + ' ' + datum.toNode",
"as": "lookUpKey"
},
{
"type": "lookup",
"from": "network_properties",
"key": "NetName",
"fields": ["Net"],
"as": ["net_properties"],
"default": 0
},
{
"type": "lookup",
"from": "node-data",
"key": "node_id",
"fields": ["toNode"],
"values": ["index"],
"as": ["target"],
"default": 0
},
{
"type": "lookup",
"from": "node-data",
"key": "node_id",
"fields": ["fromNode"],
"values": ["index"],
"as": ["source"],
"default": 0
},
]
}
{
"name": "selected",
"source": "link-data",
"transform": [
{
"type": "filter",
"expr": "datum.fromNode === active || datum.toNode === active"
}
]
}
],
"scales": [
{
"name": "x-scale",
"type": "linear",
"domain": {"data": "node-data", "field": "index"},
"range": "width"
},
{
"name": "y-scale",
"type": "linear",
"domain": {"data": "node-data", "field": "net_level"},
"range": [390, 0]
}
],
"marks": [
{
"name": "nodes",
"type": "symbol",
"zindex": 1,
"from": {"data": "node-data"},
"encode": {
"enter": {
"fill": {"value": "blue"},
"stroke": {"value": "white"},
"x": {"scale": "x-scale", "field": "index"},
"y": {"scale": "y-scale", "field": "net_level"}
},
"update": {
"size": [
{"test": "datum.node_id === active", "value": 500},
{
"test": "indata('selected', 'fromNode', datum.node_id)",
"value": 250
},
{"value": 100}
],
"fill": [
{"test": "datum.node_id === active", "signal": "colorIn"},
{
"test": "indata('selected', 'fromNode', datum.node_id)",
"signal": "colorOut"
},
{"value": "blue"}
],
"cursor": {"value": "pointer"},
"x": {"scale": "x-scale", "field": "index"},
"y": {"scale": "y-scale", "field": "net_level"}
},
"hover": {
"tooltip": {"signal": "{'node_id':datum.node_id,'Hier':datum.net_level}"},
"strokeWidth": [{"value": 1}]
}
},
"transform": [
{
"type": "force",
"iterations": 10,
"restart": false,
"static": true,
"signal": "force",
"forces": [
{"force": "nbody"},
{
"force": "link",
"links": "link-data",
"distance": {"value": 1}
}
]
}
]
},
{
"type": "path",
"from": {"data": "link-data"},
"interactive": false,
"encode": {
"update": {
"stroke": [
{"field": "net_properties.color"}
],
"strokeWidth": [
{
"test": "datum.fromNode === active || datum.toNode === active",
"value": 5
},
{"field": "net_properties.width"}
],
"strokeDash": [
{"field": "net_properties.dashes"}
]
},
"hover": {"strokeWidth": [{"value": 2}]}
},
"transform": [
{
"type": "linkpath",
"require": {"signal": "force"},
"shape": "curve",
"sourceX": "datum.source.x",
"sourceY": "datum.source.y",
"targetX": "datum.target.x",
"targetY": "datum.target.y"
}
]
}
]
}