如何让Vega-Lite分组条形图的组空间随数据量动态调整？

问题描述 #

参考HoosierBi的YouTube视频甘特图代码，实现了按country分组的条形图：起始日期硬编码为当日（示例为2023-05-03），结束日期使用项目的_Date_Target。当前问题是每个country组的高度由项目数量最多的组决定，无法根据组内项目数量动态调整（如示例中BBB组仅2个项目，却占用与AAA组（4个项目）相同的高度）。尝试过设置innerBand和Facet，均未解决问题。

当前代码 #

{  
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",  
  "data": {    
    "values": [      
      {        
        "name": "A",        
        "country": "BBB",        
        "_Date_Target": "2023-02-20",        
        "_Date_Today": "2023-05-03"      
      },      
      {        
        "name": "A1",        
        "country": "AAA",        
        "_Date_Target": "2023-01-10",        
        "_Date_Today": "2023-05-03"      
      },      
      {        
        "name": "B",        
        "country": "BBB",        
        "_Date_Target": "2023-08-21",        
        "_Date_Today": "2023-05-03"      
      },      
      {        
        "name": "E",        
        "country": "AAA",        
        "_Date_Target": "2023-09-01",        
        "_Date_Today": "2023-05-03"      
      },      
      {        
        "name": "F",        
        "country": "AAA",        
        "_Date_Target": "2023-08-15",        
        "_Date_Today": "2023-05-03"      
      },      
      {        
        "name": "G",        
        "country": "AAA",        
        "_Date_Target": "2023-11-20",        
        "_Date_Today": "2023-05-03"      
      }    
    ]  
  },  
  "height": {"step": 15},  
  "layer": [    
    {      
      "layer": [{"mark": {"type": "bar", "tooltip": true}}],      
      "encoding": {        
        "yOffset": {"field": "name"},        
        "x": {          
          "field": "_Date_Today",          
          "type": "temporal",          
          "axis": {            
            "title": null,            
            "format": "%b-%y",            
            "grid": true,            
            "gridWidth": 1,            
            "gridColor": "grey",            
            "gridDash": [4, 4],            
            "gridOpacity": {              
              "condition": {                
                "test": {"field": "value", "timeUnit": "month", "equal": 1},                
                "value": 0.6              
              },              
              "value": 0            
            }          
          }        
        },        
        "y": {          
          "field": "country",          
          "type": "nominal",          
          "axis": {            
            "title": null,            
            "grid": true,            
            "tickBand": "extent"          
          }        
        },        
        "x2": {"field": "_Date_Target"}      
      }    
    },    
    {      
      "mark": {"type": "rule", "color": "red"},      
      "encoding": {"x": {"field": "_Date_Today", "type": "temporal"}}    
    }  
  ]
}

解决方案代码 #

通过**分面（facet）**替代原有的y + yOffset布局，让每个country组作为独立分面，分面高度自动适配组内项目数量：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"name": "A", "country": "BBB", "_Date_Target": "2023-02-20", "_Date_Today": "2023-05-03"},
      {"name": "A1", "country": "AAA", "_Date_Target": "2023-01-10", "_Date_Today": "2023-05-03"},
      {"name": "B", "country": "BBB", "_Date_Target": "2023-08-21", "_Date_Today": "2023-05-03"},
      {"name": "E", "country": "AAA", "_Date_Target": "2023-09-01", "_Date_Today": "2023-05-03"},
      {"name": "F", "country": "AAA", "_Date_Target": "2023-08-15", "_Date_Today": "2023-05-03"},
      {"name": "G", "country": "AAA", "_Date_Target": "2023-11-20", "_Date_Today": "2023-05-03"}
    ]
  },
  "facet": {
    "row": {"field": "country", "type": "nominal", "header": {"title": null}}
  },
  "spec": {
    "height": {"step": 15},
    "layer": [
      {
        "mark": {"type": "bar", "tooltip": true},
        "encoding": {
          "y": {"field": "name", "type": "nominal", "axis": {"title": null}},
          "x": {
            "field": "_Date_Today",
            "type": "temporal",
            "axis": {
              "title": null,
              "format": "%b-%y",
              "grid": true,
              "gridWidth": 1,
              "gridColor": "grey",
              "gridDash": [4,4],
              "gridOpacity": {
                "condition": {"test": {"field": "value", "timeUnit": "month", "equal": 1}, "value": 0.6},
                "value": 0
              }
            }
          },
          "x2": {"field": "_Date_Target"}
        }
      },
      {
        "mark": {"type": "rule", "color": "red"},
        "encoding": {"x": {"field": "_Date_Today", "type": "temporal"}}
      }
    ]
  }
}

方案说明 #

• 使用facet.row按country分组，每个组对应独立分面，分面高度由height.step乘以组内项目数量自动计算，实现动态适配
• 保留原有的时间轴样式、红色今日标线及tooltip功能，与原代码功能一致但空间利用更合理

内容的提问来源于stack exchange，提问作者WojtekW