Interval与Point选择联动：实现无重置的高效多选择交互

要实现多区间叠加选择、点选添加/移除且两种选择互不干扰的效果，需要调整选择参数的resolve和toggle属性，修改后的代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {"values": [
    {"testo":"ciro"},
    {"testo":"piro"},
    {"testo":"niro"}
  ]},
  "params": [
    {
      "name": "pts",
      "select": {"type": "point", "toggle": true, "resolve": "independent"}
    },
    {
      "name": "brs",
      "select": {"type": "interval", "resolve": "union"}
    }
  ],
  "mark": "text",
  "encoding": {
    "x": {"value":10},
    "y": {"field": "testo", "type": "ordinal"},
    "text": {"field": "testo", "type": "ordinal"},
    "color": {
      "condition": [
        {"param": "brs", "value": "steelblue"},
        {"param": "pts", "value": "orange"}
      ],
      "value": "gray"
    }
  }
}

关键修改说明 #

• 区间选择（brs）：设置"resolve": "union"，允许连续绘制多个区间，新的区间会和已有区间合并，不会替换原有选择。
• 点选择（pts）：
  • toggle: true：实现点击单个元素时，切换其选中状态（添加/移除）。
  • resolve: 'independent'：确保点选操作不会重置已有的区间选择，两种选择状态独立存储。
• 颜色编码：通过多条件判断，分别给区间选中和点选的元素设置不同高亮色，未选中元素默认灰色，清晰区分选择状态。

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