Vega瀑布图实现悬停时高亮整个数据系列而非单个标记的方法咨询

实现方案 #

你当前的配置已经按id做了分面聚合，只需要加一个全局信号跟踪悬停的系列ID，再修改填充色的判断逻辑即可：

1. 先在Vega spec的顶层添加信号定义，用来存储当前悬停的系列ID：

"signals": [
  {
    "name": "hoveredId",
    "value": null,
    "on": [
      {"events": "@groupMark:mouseover", "update": "datum.id"},
      {"events": "@groupMark:mouseout", "update": "null"}
    ]
  }
]

2. 修改你的marks配置，给外层group加name，同时修改两个rect的填充逻辑，删除单个rect的hover配置：

marks: [
  {
    type: 'group',
    name: 'groupMark', // 给分组加名称方便信号监听
    from: {
      facet:
          {data: 'datatable', name: 'curve', groupby: 'id'}
    },
    marks: [{
      type: 'rect',
      from: {data: 'curve'},
      encode: {
        update: {
          xc: {scale: 'x', field: 'x'},
          width: {value: 10},
          y: {scale: 'y', field: 'y'},
          'y2': {scale: 'y', field: 'prevY'},
          // 加条件判断：如果是当前悬停的id就用firebrick，否则用原配色
          fill: [
            {"test": "datum.id == hoveredId", "value": "firebrick"},
            {"scale": 'color', field: 'id'}
          ]
        }
      }
    },{
      type: 'rect',
      from: {data: 'curve'},
      encode: {
        update: {
          x: {scale: 'x', field: 'prevX'},
          'x2': {scale: 'x', field: 'x'},
          y: {scale: 'y', field: 'prevY'},
          height: {value: 1},
          // 同样加条件判断，保证水平连接线也同步高亮
          fill: [
            {"test": "datum.id == hoveredId", "value": "firebrick"},
            {"scale": 'color', field: 'id'}
          ]
        },
      }
    }]
  },
]

实现原理 #

因为你已经按id做了分面，每个外层group对应一整个系列，监听group的鼠标事件就能直接拿到当前系列的id值。信号hoveredId更新后，所有绑定了该信号的矩形都会重新计算填充色，自然实现了同系列所有元素同步高亮的效果。

内容的提问来源于stack exchange，提问作者emmby