改变设置交互状态样式的方式

[pearmini]

通过 state 设置交互状态样式

现在是在 view.interaction 里面的配置交互状态样式，这样是不合理的：

• 当一个 view 拥有多个 Mark 的时候，无法设置单个 Mark 的样式。
• 多 View 联动交互的时候，没有交互的 View 将没有办法指定样式。
• 交互之间的状态只和交互有关，有的是 selected，有的是 highlighted。

解决思路

交互只是消费数据，不提供数据，数据的提供都在编码阶段完成，这样和 tooltip 交互思路也是一致的了。可以看 Vega-Lite 的这个例子：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "params": [
    {
      "name": "highlight",
      "select": {"type": "point", "on": "mouseover"}
    },
    {"name": "select", "select": "point"}
  ],
  "mark": {
    "type": "bar",
    "fill": "#4C78A8",
    "stroke": "black",
    "cursor": "pointer"
  },
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "fillOpacity": {
      "condition": {"param": "select", "value": 1},
      "value": 0.3
    },
    "strokeWidth": {
      "condition": [ // 配置交互样式
        {
          "param": "select",
          "empty": false,
          "value": 2
        },
        {
          "param": "highlight",
          "empty": false,
          "value": 1
        }
      ],
      "value": 0
    }
  },
  "config": {
    "scale": {
      "bandPaddingInner": 0.2
    }
  }
}

解决办法

通过 state 或者 style 去设置交互样式。同时一个元素内置只有三种状态：

• unselected：通过 state.unselected.${StyleKey} 去设置样式
• selected：通过 state.selected.${StyleKey} 去设置样式

// 通过 state 设置
const options = {
  type: 'line',
  style: {
    stroke: 'blue',
  },
  state: {
    selected: { stroke: 'red' },
  },
};

这样就可以解决下面的问题：

// 多个 Mark
const options = {
  type: 'view',
  children: [
    { type: 'line', state: { selected: { fill: 'steelblue' } } },
    { type: 'point', state: { selected: { fill: 'orange' } } },
  ],
  interactions: [{ type: 'elementHighlight' }],
};

这样主题里面设置默认值也很容易了：

const theme = {
  line: {
    line: {
      normal: {
        fill: '',
        strokeOpacity: 1,
        lineWidth: 1,
        connectStroke: '#aaa',
      },
      selected: { fill: 'red' },
    },
  },
};```

[visiky]

这里有两个 case，看下这个方案是否可以考虑到下面两种情况。如果可以的话，就忽略

Case1

ElementSelected 和 ElementActive 交互是可以同时存在的，比如这个的 case
1、鼠标 hover 元素的时候，激活 ElementActive 交互，进行描边
2、鼠标 hover 图例的时候，激活 ElementSelected 交互，进行元素划出

不过这个 case 的元素选中划出交互可以用其它来处理，不涉及状态样式

Case2

下面这个 case 就更复杂了
1、元素可以实现多选交互：普通 hover 激活交互是 1px 描边，选中交互式 2px 描边
2、按住 shift 键，可以进行圈选交互：圈选选中的元素其实处于一个激活状态，所以是 1px 描边

Resources

Done 交互稿 （内网访问）

[pearmini]

close: #4649