Vega-Lite环形图下拉菜单异常求助：颜色不更新等问题

• 默认选中数据集最后一个代理Tommy时，颜色显示正常
• 切换到Mabel/Bart等其他代理时，颜色无法正确更新
• 选择下拉列表的null选项时，图表重置回Tommy的正确颜色

用户提供的原始代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"agent": "Mabel", "type": "answered less than 20", "value": 9},
      {"agent": "Mabel", "type": "answered less than 15", "value": 15},
      {"agent": "Mabel", "type": "answered less than 10", "value": 24},
      {"agent": "Mabel", "type": "answered less than 5", "value": 11},
      {"agent": "Mabel", "type": "answered greater than 20", "value": 4},
      {"agent": "Mabel", "type": "abandon system", "value": 0},
      {"agent": "Mabel", "type": "abandon agent", "value": 9},
      {"agent": "Bart", "type": "answered less than 20", "value": 3},
      {"agent": "Bart", "type": "answered less than 15", "value": 1},
      {"agent": "Bart", "type": "answered less than 10", "value": 6},
      {"agent": "Bart", "type": "answered less than 5", "value": 14},
      {"agent": "Bart", "type": "answered greater than 20", "value": 11},
      {"agent": "Bart", "type": "abandon system", "value": 0},
      {"agent": "Bart", "type": "abandon agent", "value": 8},
      {"agent": "Tommy", "type": "answered less than 20", "value": 48},
      {"agent": "Tommy", "type": "answered less than 15", "value": 18},
      {"agent": "Tommy", "type": "answered less than 10", "value": 11},
      {"agent": "Tommy", "type": "answered less than 5", "value": 15},
      {"agent": "Tommy", "type": "answered greater than 20", "value": 2},
      {"agent": "Tommy", "type": "abandon system", "value": 0},
      {"agent": "Tommy", "type": "abandon agent", "value": 11}
    ]
  },
  "description": "test",
  "height": 200,
  "layer": [
    {
      "encoding": {
  "color": {
      "condition": {"param": "Agents", "field": "type", "scale": {"scheme": "spectral"}, "type": "nominal"},
      "value": "grey"
    },


        "theta": {"field": "value", "type": "quantitative"},
        "tooltip": [
          {"field": "type", "type": "nominal"},
          {"field": "value", "type": "quantitative"}
        ]
      },
      "mark": {"innerRadius": 50, "outerRadius": 100, "type": "arc"},
      "params": [
        {
          "bind": {
            "input": "select",
            "options": [null, "Mabel", "Bart", "Tommy"]
          },
          "name": "Agents",
          "select": {"fields": ["agent"], "type": "point"}
        }
      ]
    },
    {
      "encoding": {"text": {"field": "total", "type": "nominal"}},
      "mark": {
        "fontSize": 23,
        "fontWeight": "bold",
        "tooltip": "Calls answered within 20 seconds",
        "type": "text"
      }
    }
  ],
  "title": "Agent Service Levels",
  "width": 200
}

修复方案 #

问题核心

原始代码使用了point类型的选择器，这种选择器用于交互选中数据点，和下拉菜单的筛选逻辑不兼容。同时颜色编码的条件绑定错误，导致切换代理时无法正确渲染对应数据的颜色。

具体修改

1. 调整选择器类型：将select: {"type": "point"}改为select: {"type": "single", "fields": ["agent"]}，并设置value: "Tommy"指定默认选中值
2. 修正颜色编码：移除颜色的条件绑定，直接基于type字段设置颜色，确保所有代理的分类都能正确映射颜色
3. 添加数据过滤：在图层中加入transform逻辑，根据选中的代理参数过滤数据
4. 修复中心文本：添加计算字段生成总呼叫数，替换不存在的total字段

修复后的完整代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"agent": "Mabel", "type": "answered less than 20", "value": 9},
      {"agent": "Mabel", "type": "answered less than 15", "value": 15},
      {"agent": "Mabel", "type": "answered less than 10", "value": 24},
      {"agent": "Mabel", "type": "answered less than 5", "value": 11},
      {"agent": "Mabel", "type": "answered greater than 20", "value": 4},
      {"agent": "Mabel", "type": "abandon system", "value": 0},
      {"agent": "Mabel", "type": "abandon agent", "value": 9},
      {"agent": "Bart", "type": "answered less than 20", "value": 3},
      {"agent": "Bart", "type": "answered less than 15", "value": 1},
      {"agent": "Bart", "type": "answered less than 10", "value": 6},
      {"agent": "Bart", "type": "answered less than 5", "value": 14},
      {"agent": "Bart", "type": "answered greater than 20", "value": 11},
      {"agent": "Bart", "type": "abandon system", "value": 0},
      {"agent": "Bart", "type": "abandon agent", "value": 8},
      {"agent": "Tommy", "type": "answered less than 20", "value": 48},
      {"agent": "Tommy", "type": "answered less than 15", "value": 18},
      {"agent": "Tommy", "type": "answered less than 10", "value": 11},
      {"agent": "Tommy", "type": "answered less than 5", "value": 15},
      {"agent": "Tommy", "type": "answered greater than 20", "value": 2},
      {"agent": "Tommy", "type": "abandon system", "value": 0},
      {"agent": "Tommy", "type": "abandon agent", "value": 11}
    ]
  },
  "description": "test",
  "height": 200,
  "layer": [
    {
      "transform": [
        {"filter": {"param": "Agents"}}
      ],
      "encoding": {
        "color": {
          "field": "type",
          "scale": {"scheme": "spectral"},
          "type": "nominal"
        },
        "theta": {"field": "value", "type": "quantitative"},
        "tooltip": [
          {"field": "type", "type": "nominal"},
          {"field": "value", "type": "quantitative"}
        ]
      },
      "mark": {"innerRadius": 50, "outerRadius": 100, "type": "arc"}
    },
    {
      "transform": [
        {"filter": {"param": "Agents"}},
        {"aggregate": [{"op": "sum", "field": "value", "as": "total"}]}
      ],
      "encoding": {"text": {"field": "total", "type": "quantitative"}},
      "mark": {
        "fontSize": 23,
        "fontWeight": "bold",
        "tooltip": "Total calls",
        "type": "text"
      }
    }
  ],
  "params": [
    {
      "bind": {
        "input": "select",
        "options": [null, "Mabel", "Bart", "Tommy"],
        "name": "Select Agent:"
      },
      "name": "Agents",
      "select": {"type": "single", "fields": ["agent"]},
      "value": "Tommy"
    }
  ],
  "title": "Agent Service Levels",
  "width": 200
}

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