在 vega 中刷/链接（不是 vega-lite）
Posted
技术标签:
【中文标题】在 vega 中刷/链接（不是 vega-lite）【英文标题】：Brushing/linking in vega (not vega-lite) 【发布时间】：2020-04-22 11:43:07 【问题描述】：我正在尝试在 vega 中刷/链接两个图，更具体地说是一个节点链接图和几个散点图。根据节点链接图中的信号拖动方式，我确实走得很远，但还不够远......
为简单起见，我将在此处仅使用两个散点图提供一些测试代码：
"$schema": "https://vega.github.io/schema/vega/v5.json",
"padding": 0,
"autosize": "none",
"width": 800,
"height": 400,
"signals": [
"description": "Any datapoint is activated",
"name": "datapoint_is_activated", "value": false,
"on": [
"events": "symbol:mouseover",
"update": "true"
,
"events": "symbol:mouseout",
"update": "false"
]
,
"description": "Active datapoint",
"name": "activated_datapoint", "value": null,
"on": [
"events": "symbol:mouseover",
"update": "item()"
,
"events": "symbol:mouseout",
"update": "null"
]
],
"data": [
"name": "table",
"values": [
"name": "point A", "a": 1, "b": 2, "c": 3,
"name": "point B", "a": 4, "b": 5, "c": 6,
"name": "point C", "a": 9, "b": 8, "c": 7
]
],
"scales": [
"name": "xscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
,
"name": "yscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
],
"layout": "padding": 20,
"marks": [
"name": "plot1",
"type": "group",
"axes": [
"orient": "bottom", "scale": "xscale",
"orient": "right", "scale": "yscale"
],
"marks": [
"type": "symbol",
"from": "data": "table",
"encode":
"enter":
"x": "field": "a", "scale": "xscale",
"y": "field": "b", "scale": "yscale",
"tooltip": "field": "name"
,
"update":
"size": "value": 100,
"fill": "value": "grey"
]
,
"name": "plot2",
"type": "group",
"axes": [
"orient": "bottom", "scale": "xscale",
"orient": "right", "scale": "yscale"
],
"marks": [
"type": "symbol",
"from": "data": "table",
"on": [
"trigger": "datapoint_is_activated",
"modify": "activated_datapoint",
"values": "fill: \"red\""
,
"trigger": "!datapoint_is_activated",
"modify": "activated_datapoint",
"values": "fill: \"grey\""
],
"encode":
"enter":
"x": "field": "a", "scale": "xscale",
"y": "field": "c", "scale": "yscale",
"size": "value": 100,
"tooltip": "field": "name"
,
"update":
"fill": "value": "grey"
]
]
生成的图像如下所示：
这个想法是，将鼠标悬停在 left 图中的数据点上会突出显示 right 图中的相应数据点。我知道这在 vega-lite 中很简单，但它（还）不支持节点链接图。因此：织女星。
我在代码中的做法是：
在外部范围内创建一个信号，跟踪 (a) 是否有激活点，以及 (b) 这是哪个点 在图 2 中有一个触发器，该触发器获取激活的数据点并将其颜色更改为“红色”。我隐隐约约觉得这与我对modify 和values 部分的定义有关，但我想不通。
非常感谢任何帮助！
谢谢你， 一月。
【问题讨论】：
【参考方案1】：经过大量的反复试验，我确实找到了一种方法来做到这一点。我没有使用trigger（我相信这是执行此操作的规范方式），而是仅在fill 部分使用test：datapoint_is_activated && datum === activated_datapoint.datum。请参阅下面的代码和图像。
"$schema": "https://vega.github.io/schema/vega/v5.json",
"padding": 0,
"autosize": "none",
"width": 800,
"height": 400,
"signals": [
"description": "Any datapoint is activated",
"name": "datapoint_is_activated", "value": false,
"on": [
"events": "symbol:mouseover",
"update": "true"
,
"events": "symbol:mouseout",
"update": "false"
]
,
"description": "Active datapoint",
"name": "activated_datapoint", "value": null,
"on": [
"events": "symbol:mouseover",
"update": "item()"
,
"events": "symbol:mouseout",
"update": "null"
]
],
"data": [
"name": "table",
"values": [
"name": "point A", "a": 2, "b": 2, "c": 4,
"name": "point B", "a": 4, "b": 5, "c": 6,
"name": "point C", "a": 5, "b": 3, "c": 5
]
],
"scales": [
"name": "xscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
,
"name": "yscale",
"type": "linear",
"domain": [0,10],
"range": [0,200]
],
"layout": "padding": 20,
"marks": [
"name": "plot1",
"type": "group",
"axes": [
"orient": "bottom", "scale": "xscale",
"orient": "right", "scale": "yscale"
],
"marks": [
"type": "symbol",
"from": "data": "table",
"encode":
"enter":
"x": "field": "a", "scale": "xscale",
"y": "field": "b", "scale": "yscale",
"tooltip": "field": "name",
"size": "value": 200
,
"update":
"fill": [
"test": "datapoint_is_activated && datum === activated_datapoint.datum",
"value": "red",
"value": "lightgrey"
]
]
,
"name": "plot2",
"type": "group",
"axes": [
"orient": "bottom", "scale": "xscale",
"orient": "right", "scale": "yscale"
],
"marks": [
"type": "symbol",
"from": "data": "table",
"encode":
"enter":
"x": "field": "a", "scale": "xscale",
"y": "field": "c", "scale": "yscale",
"size": "value": 200,
"tooltip": "field": "name"
,
"update":
"fill": [
"test": "datapoint_is_activated && datum === activated_datapoint.datum",
"value": "red",
"value": "lightgrey"
]
]
]
【讨论】：
我花了比我愿意承认的时间更长的时间来尝试做类似的事情。在查看了文档和其他示例之后，您的答案终于有所帮助。 hanky out（它是一个字谜，因为 SE）以上是关于在 vega 中刷/链接（不是 vega-lite）的主要内容，如果未能解决你的问题，请参考以下文章