基于选择Vega-Lite动态改变编码中的Y轴场

基于选择Vega-Lite动态改变编码中的Y轴场,vega-lite,vega,Vega Lite,Vega,如何根据选择动态更改y轴编码的数据字段?我正在尝试构建一个可视化,以显示一天24小时内的事件计数数据,我希望用户能够选择不同的时区(例如EST、CST、MST或PST) 为了做到这一点,我构建了一个选择,在这里我指定了上面括号中列出的所有选项,并将EST设置为默认值。我想创建一个条件,当我选择EST之外的另一个选项时,我会看到可视化动态更新。我已经探索过专门为这些时间段创建其他小时字段,或者添加条件逻辑来尝试解释这些动态变化,但我还没有找到一个好的解决方案。有人能帮忙吗 下面是我的几行数据的示例

如何根据选择动态更改y轴编码的数据字段?我正在尝试构建一个可视化,以显示一天24小时内的事件计数数据,我希望用户能够选择不同的时区(例如EST、CST、MST或PST)

为了做到这一点,我构建了一个选择,在这里我指定了上面括号中列出的所有选项,并将EST设置为默认值。我想创建一个条件,当我选择EST之外的另一个选项时,我会看到可视化动态更新。我已经探索过专门为这些时间段创建其他小时字段,或者添加条件逻辑来尝试解释这些动态变化,但我还没有找到一个好的解决方案。有人能帮忙吗

下面是我的几行数据的示例

"data": {
      "values": [
        {
          "title_column":"example",
          "Type": "Technology",
          "Events": "100",
          "Hour": "0",
          "Date": "9/1/20",
          "Time Period": "Last Time"
        },
        {
          "title_column":"example",
          "Type": "Technology",
          "Events": "110",
          "Hour": "1",
          "Date": "9/1/20",
          "Time Period": "Last Time"
        },
当它放在一起时,可视化效果是这样的,它会根据选择动态更新:

当我的代码是静态的时,它看起来是这样的:

    "layer":[
           {"mark":{
               "type":"bar",
               "point":true,
               "color":"#FFC94E",
               "height":15
           },
           "selection": {
        "timezone": {
          "type": "single",
          "init": {"changer": "EST"},
          "bind": {
            "changer": {"input": "select",
              "options": ["EST","CST (-1 Hour)","MST (-2 Hours)","PST (-3 Hours)"]}
          }
        }
      },
    "encoding":
        {
            "x":{"field":"Events",
            "type":"quantitative",
            "aggregate":"sum",
            "axis":null},
            "y": {"field":"Hour",
            "type":"ordinal",
            "axis":{
              "labelSeparation":1,
              "labelPadding":4,
              "title":null
            }
            }
        }}]
        }
然而,特别关注代码底部的y编码,我理想地希望使其动态化。我想我可以为每个时区创建一个计算,然后写一个条件,如下所示,但我一直没能让它工作。非常感谢您的帮助

"y": {
            "condition": { 
            "selection": {"timezone" : "EST"},
            "datum": "datum.Hour"
              }
            "condition": { 
            "selection": {"timezone" : "CST (-1 Hour)"},
            "datum": "datum.Hour_CST"
              }
              ...
            }

以下是指向我的代码的链接:
.

选择只能筛选列值,而不能筛选列名称。幸运的是,您可以使用

为了实现您的目标,我建议如下:

  • 使用一系列参数计算包含要显示的值的新列
  • 使用将这些值堆叠到具有关联键列的单个列中
  • 将选择绑定链接到在折叠变换中创建的键列
  • 使用a根据选择过滤值
  • 最后,添加行编码,以便在轴上标记选定的列
放在一起,看起来是这样的():

{
“宽度”:300,
“数据”:{
“价值”:[……]
},
“转变”:[
{“过滤器”:{“字段”:“时间段”,“相等”:“上次”},
{“计算”:“datum.Hour-0”,“as”:“EST”},
{“计算”:“datum.Hour-1”,“as”:“CST(-1小时)”},
{“计算”:“datum.Hour-2”,“as”:“MST(-2小时)”},
{“计算”:“datum.Hour-3”,“as”:“PST(-3小时)”},
{
“折叠”:[“东部标准时间”、“中部标准时间(-1小时)”、“中部标准时间(-2小时)”、“太平洋标准时间(-3小时)”,
“as”:[“区域”、“小时”]
},
{“筛选器”:{“选择”:“时区”}
],
“选择”:{
“时区”:{
“类型”:“单个”,
“init”:{“Zone”:“EST”},
“绑定”:{
“区域”:{
“名称”:“时区”,
“输入”:“选择”,
“选择”:[
“EST”,
“CST(-1小时)”,
“MST(-2小时)”,
“太平洋标准时间(-3小时)”
]
}
}
}
},
“标记”:{“类型”:“条”,“点”:真,“颜色”:“#FFC94E”,“高度”:15},
“编码”:{
“x”:{
“字段”:“事件”,
“类型”:“定量”,
“总计”:“总和”,
“轴”:空
},
“y”:{
“字段”:“小时”,
“类型”:“序号”,
“轴”:{“labelSeparation”:1,“labelPadding”:4,“title”:null}
},
“行”:{
“字段”:“区域”,
“类型”:“标称”,
“标题”:空
}
}
}

这是我需要的链接!非常感谢。