根据条件隐藏标记。

huangapple go评论94阅读模式
英文:

Hide a mark based on a condition

问题

I'm wondering if it's possible to show just one of the marks based on a condition or something that is fed by a parameter dynamically.

我在想是否可以根据条件或通过动态参数提供的内容仅显示其中一个标记。

I want to create a parameter where a user is able to select one of the two values "line" or "rule." Based on the selection one of the two marks is shown, and the other is hidden.

我想创建一个参数,使用户能够选择两个值中的一个,"line"或"rule"。根据选择,其中一个标记将被显示,而另一个将被隐藏。

The data does not change.

数据不会改变。

英文:

I'm wondering if it's possible to show just one of the marks based on a condition or something that is fed by a parameter dynamically.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"}
      }
    }
  ]
}

I want to create a parameter where a user is able to select one of the two values "line" or "rule." Based on the selection one of the two marks is shown, and the other is hidden.

The data does not change.

答案1

得分: 2

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/stocks.csv"},
"params": [
{
"name": "choice",
"value": "rule",
"bind": {"input": "radio", "options": ["rule", "line"]}
}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"},
"opacity": {
"condition": {"test": "choice == 'rule'", "value": 0},
"value": 1
}
}
},
{
"mark": "rule",
"encoding": {
"y": {"field": "price", "aggregate": "mean"},
"size": {"value": 2},
"color": {"field": "symbol"},
"opacity": {
"condition": {"test": "choice == 'line'", "value": 0},
"value": 1
}
}
}
]
}

英文:

Here you go.

根据条件隐藏标记。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "params": [
    {
      "name": "choice",
      "value": "rule",
      "bind": {"input": "radio", "options": ["rule", "line"]}
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"},
        "opacity": {
          "condition": {"test": "choice == 'rule'", "value": 0},
          "value": 1
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"},
        "opacity": {
          "condition": {"test": "choice == 'line'", "value": 0},
          "value": 1
        }
      }
    }
  ]
}

huangapple
  • 本文由 发表于 2023年3月21日 01:47:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793625.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定