使用参数和字段对笔画属性的条件进行编码

Question

在下面的示例中，我将“params”设置为指针，然后在编码块中，我有一个笔画属性，我想根据“params”和数据集中的字段进行设置。从逻辑上讲，我想将鼠标悬停在上面，同时 datum.count 必须大于 0，那么描边属性将为黑色。

以下示例中的测试条件不起作用。有没有办法结合这两个条件？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"actual": "A", "predicted": "A", "count": 13},
      {"actual": "A", "predicted": "B", "count": 0},
      {"actual": "A", "predicted": "C", "count": 0},
      {"actual": "B", "predicted": "A", "count": 0},
      {"actual": "B", "predicted": "B", "count": 10},
      {"actual": "B", "predicted": "C", "count": 6},
      {"actual": "C", "predicted": "A", "count": 0},
      {"actual": "C", "predicted": "B", "count": 0},
      {"actual": "C", "predicted": "C", "count": 9}
    ]
  },
  "params": [
    {"name": "highlight", "select": {"type": "point", "on": "pointerover"}}
  ],
  "mark": {"type": "rect", "strokeWidth": 2},
  "encoding": {
    "y": {"field": "actual", "type": "nominal"},
    "x": {"field": "predicted", "type": "nominal"},
    "fill": {"field": "count", "type": "quantitative"},
    "stroke": {
      "condition": {"test": "highlight && datum.count > 0", "value": "black"},
      "value": null
    },
    "opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
    "order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
  },
  "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "view": {"step": 40},
    "range": {"ramp": {"scheme": "yellowgreenblue"}},
    "axis": {"domain": false}
  }
}

我尝试了以下方法

"stroke": {
      "condition": {"test": "highlight && datum.count > 0", "value": "black"},
      "value": null
    }

Answer 1

试试这个：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"actual": "A", "predicted": "A", "count": 13},
      {"actual": "A", "predicted": "B", "count": 0},
      {"actual": "A", "predicted": "C", "count": 0},
      {"actual": "B", "predicted": "A", "count": 0},
      {"actual": "B", "predicted": "B", "count": 10},
      {"actual": "B", "predicted": "C", "count": 6},
      {"actual": "C", "predicted": "A", "count": 0},
      {"actual": "C", "predicted": "B", "count": 0},
      {"actual": "C", "predicted": "C", "count": 9}
    ]
  },
  "params": [
    {"name": "highlight", "select": {"type": "point", "on": "pointerover"}}
  ],
  "mark": {"type": "rect", "strokeWidth": 2},
  "encoding": {
    "y": {"field": "actual", "type": "nominal"},
    "x": {"field": "predicted", "type": "nominal"},
    "fill": {"field": "count", "type": "quantitative"},
    "stroke": {
      "condition": {
        "param": "highlight",
        "value": {"expr": "datum.count>0?'red':'transparent'"}
      },
      "value": "transparent"
    },
    "opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
    "order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
  },
  "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "view": {"step": 40},
    "range": {"ramp": {"scheme": "yellowgreenblue"}},
    "axis": {"domain": false}
  }
}