vega-lite 是否可能存在多种情况？答案

【问题标题】：Are multiple conditions possible in vega-lite?vega-lite 是否可能存在多种情况？
【发布时间】：2022-11-16 21:12:59
【问题描述】：

我想构建一个图表，支持点击特定柱，以及刷选多个柱。查看 condition 文档，我不清楚我是否可以这样做：

"fillOpacity": {
  "condition": [
    {
      "param": "select",
      "value": 1
    },
    {
      "param": "brush",
      "value": 1
    }
  ],
  "value": 0.3
}

我使用的参数是：

"params": [
  {
    "name": "brush",
    "select": {
      "type": "interval",
      "encodings": ["x"]
    }
  },
  {"name": "select", "select": "point"}
]

我没有看到任何错误，但不会发生双重选择行为。

谢谢你的帮助。

【问题讨论】：

标签： vega-lite vega

【解决方案1】：

您可以有多个条件，如本规范所示。如果您需要进一步排除故障，则需要提供完整的规格以供查看。

{
  "$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
    }
  }
}

【讨论】：

【解决方案2】：

布尔运算符可能是您所需要的：

"fillOpacity": {
  "condition": {
    "test": {
      "or": [{"param": "select"}, {"param": "brush"}]
    },
    "value": 1
  },
  "value": 0.3
}

【讨论】：