Vega-Lite可视化中移除多余非交互文本图例的问题

嘿，我来帮你解决这个多余图例的问题！你遇到的情况是因为当你设置颜色刻度独立后，那些使用相同颜色字段但不需要图例的子视图（也就是你的两个strip plot）自动生成了一个默认的文本图例，而这个图例没有绑定交互参数，所以看起来是静态的非交互文本。

下面是具体的修复步骤：

步骤1：关闭strip plot的自动图例 #

你的两个strip plot的颜色编码只在brush选中时生效，平时是灰色，完全不需要显示图例。所以直接在它们的color编码里添加"legend": null，告诉Vega-Lite不要为这些视图生成图例。

比如修改第一个strip plot的color部分：

"color": {
  "condition":{
    "param": "brush",
    "field": "Major_category",
    "type": "nominal",
    "scale": {
      "domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
      "range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
    }
  },
  "value": "#d3d3d3",
  "legend": null  // 新增这一行，禁用图例
}

第二个strip plot的color编码也做同样的修改，加上"legend": null。

步骤2：确认resolve的作用范围（可选优化） #

你当前把resolve放在了hconcat的层级，这其实没问题，但如果想让整个可视化的颜色刻度规则更清晰，可以把resolve移到最外层的vconcat里，效果完全一致：

"vconcat": [
  // ... 你的hconcat和两个strip plot ...
],
"resolve": {"scale": {"color": "independent"}}

为什么这样有效？ #

Vega-Lite默认会为所有使用分类颜色字段的视图生成图例，即使你的颜色是通过condition触发的。当你设置颜色刻度独立后，每个视图的颜色刻度都是单独的，strip plot的颜色刻度虽然和散点图用了相同的字段，但因为没有手动关闭图例，就会生成一个默认的非交互图例。通过添加legend: null，我们直接禁用了这些不需要的图例，只保留散点图和条形图的交互图例。

修改后的完整strip plot代码示例（你可以直接替换对应模块）：

第一个strip plot：

{
  "mark": {
    "type": "tick",
    "opacity": 0.9,
    "thickness": 1.2
  },
  "width":991,
  "height":50,
  "params": [{
    "name": "brush",
    "select": {"type": "interval"}
  }],
  "transform": [
    {"filter": {"param": "Legend_Select"}}
  ],
  "encoding": {
    "x":{
      "field": "ShareWomen",
      "type": "quantitative",
      "title": "Share of Women",
      "axis": {"gridOpacity": 0.5, "format": ".0%"},
      "scale": {"domain":[0,1]}
    },
    "color": {
      "condition":{
        "param": "brush",
        "field": "Major_category",
        "type": "nominal",
        "scale": {
          "domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
          "range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
        }
      },
      "value": "#d3d3d3",
      "legend": null
    },
    "tooltip": [
      {"field": "Major", "type": "nominal"},
      {"field": "ShareWomen", "type": "quantitative", "format": ".2%", "title": "Share of Women"}
    ]
  }
}

第二个strip plot：

{
  "mark": {
    "type": "tick",
    "opacity": 0.9,
    "thickness": 1.2
  },
  "width":991,
  "height":50,
  "transform": [
    {"filter": {"param": "Legend_Select"}},
    {"calculate": "1 - datum.ShareWomen", "as": "ShareMen"}
  ],
  "encoding": {
    "x":{
      "field": "ShareMen",
      "type": "quantitative",
      "title": "Share of Men",
      "axis": {"gridOpacity": 0.5, "format": ".0%"},
      "scale": {"domain":[0,1]}
    },
    "color": {
      "condition":{
        "param": "brush",
        "field": "Major_category",
        "type": "nominal",
        "scale": {
          "domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
          "range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
        }
      },
      "value": "#d3d3d3",
      "legend": null
    },
    "tooltip": [
      {"field": "Major", "type": "nominal"},
      {"field": "ShareMen", "type": "quantitative", "format": ".2%", "title": "Share of Men"}
    ]
  }
}

这样修改后，那个多余的文本图例就会消失，只剩下散点图和条形图的交互图例，完全符合你的需求！

备注：内容来源于stack exchange，提问作者umba