在 vega 中刷/链接（不是 vega-lite）

Question

我正在尝试在 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 部分的定义有关，但我想不通。

非常感谢任何帮助！

谢谢你， 一月。

Answer 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"}
              ]

            }
          }
        }
      ]
    }
  ]
}