在多行图上有条件地定义颜色通道。

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

Conditionally define color channel on multi-line graph

问题

我有一张图,有两条线,我想要有一个param来切换,将这两条线合并成一条。

Vega-lite允许你使用条件来编码字段,但我似乎无法在条件不满足时“定义为无”。我可以给一个value: red,但这只是将两条线都设置为相同的颜色,或者value: false/null会完全移除这两条线。

条件文档将“else”字段描述为可选项,但如果没有valuefield,我从未看到两条线 -- 这似乎是通道从未定义。

例如,我有这个图:

在多行图上有条件地定义颜色通道。

当我切换“combine”复选框时,我希望获得这个效果(与简单未定义“color”通道相同):

在多行图上有条件地定义颜色通道。

但实际上我得到了这个:

在多行图上有条件地定义颜色通道。

https://vega.github.io/editor/ 上使用的示例规范:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"y": -1, "x": 1, "name": "north"},
      {"y": 2, "x": 2, "name": "north"},
      {"y": 0, "x": 3, "name": "north"},
      {"y": -3, "x": 1, "name": "south"},
      {"y": 1, "x": 2, "name": "south"},
      {"y": 4, "x": 3, "name": "south"}
    ]
  },
  "encoding": {
    "color": {
      "condition": {"param": "combine", "field": "name"},
      "value": "red",
    },
    "x": {"field": "x", "type": "quantitative"},
    "y": {
      "aggregate": "median",
      "field": "y",
      "scale": {"domain": [-10, 10]},
      "type": "quantitative"
    }
  },
  "height": "container",
  "layer": [{"mark": {"interpolate": "basis", "type": "line"}}],
  "params": [
    {
      "bind": {"input": "checkbox"},
      "name": "combine",
      "value": "Yes"
    }
  ],
  "width": 300
}
英文:

I have a graph with two lines, I want the option to toggle a param to combine the two lines into one.

Vega-lite allows you to encode a field with a condition, but I can't seem to "define nothing" if the condition fails. I can give a value: red but that just sets both lines to the same color, or value: false/null which removes the lines entirely.

The condition docs describe the "else" fields as optional, but without any value or field I never see two lines -- which seems like the channel is never defined.

Eg, I have this graph:

在多行图上有条件地定义颜色通道。

And when I toggle the "combine" checkbox, I would like to get this (the same effect as simply not defining a 'color' channel):

在多行图上有条件地定义颜色通道。

Instead I get this:

在多行图上有条件地定义颜色通道。

Example spec for use on https://vega.github.io/editor/

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"y": -1, "x": 1, "name": "north"},
      {"y": 2, "x": 2, "name": "north"},
      {"y": 0, "x": 3, "name": "north"},
      {"y": -3, "x": 1, "name": "south"},
      {"y": 1, "x": 2, "name": "south"},
      {"y": 4, "x": 3, "name": "south"}
    ]
  },
  "encoding": {
    "color": {
      "condition": {"param": "combine", "field": "name"},
      "value": "red",
    },
    "x": {"field": "x", "type": "quantitative"},
    "y": {
      "aggregate": "median",
      "field": "y",
      "scale": {"domain": [-10, 10]},
      "type": "quantitative"
    }
  },
  "height": "container",
  "layer": [{"mark": {"interpolate": "basis", "type": "line"}}],
  "params": [
    {
      "bind": {"input": "checkbox"},
      "name": "combine",
      "value": "Yes"
    }
  ],
  "width": 300
}

答案1

得分: 1

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [
{
"transform": [{"filter": "combine?true:false"}],
"mark": {"interpolate": "basis", "type": "line"},
"encoding": {"color": {"field": "name"}}
},
{
"transform": [{"filter": "combine?false:true"}],
"mark": {
"interpolate": "basis",
"type": "line",
"color": "red"
}
}
],
"params": [{"bind": {"input": "checkbox"}, "name": "combine", "value": true}],
"width": 300
}

英文:

Best I can do.

在多行图上有条件地定义颜色通道。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [
{
"transform": [{"filter": "combine?true:false"}],
"mark": {"interpolate": "basis", "type": "line"},
"encoding": {"color": {"field": "name"}}
},
{
"transform": [{"filter": "combine?false:true"}],
"mark": {
"interpolate": "basis",
"type": "line",
"color": "red"
}
}
],
"params": [{"bind": {"input": "checkbox"}, "name": "combine", "value": true}],
"width": 300
}

huangapple
  • 本文由 发表于 2023年4月19日 19:27:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053942.html
匿名

发表评论

匿名网友

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

确定