悬停堆叠条形文本标记时的 Vega lite 工具提示

Question

对于堆叠条形图上的文本标记，有没有办法避免重复工具提示代码，以便将鼠标悬停在文本标记上时工具提示相同？

从此处调整的示例。 请注意仅显示性别的自定义工具提示。 如果我不对文本标记重复此代码，它将在悬停时显示不同的工具提示。 复杂的工具提示会让这变得不优雅。

将鼠标悬停在栏上：

将鼠标悬停在文本上：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "height": {"step": 17},
  "encoding": {
    "y": {"field": "age"}
  },
  "layer": [{
    "mark": {"type": "bar", "tooltip": true},
    "encoding": {
      "x": {
        "aggregate": "sum", "field": "people",
        "title": "population",
        "stack":  "normalize"
      },
      "color": {
        "field": "gender",
        "scale": {"range": ["#675193", "#ca8861"]}
      },
      "tooltip": [
        {   
          "field": "gender",
          "type": "nominal",
          "title": "Gender"}
      ]
    }
  }, {
    "mark": {"type": "text", "opacity": 0.9, "color": "white", "tooltip": true},
    "encoding": {
      "x": {
        "aggregate": "sum", "field": "people",
        "title": "population",
        "stack":  "normalize",
        "bandPosition": 0.5
      },
      "text": {
        "aggregate": "sum", "field": "people",
        "title": "population"
      },
      "detail": {
        "field": "gender"
      }
    }
  }]
}

更一般地说，最好找到一些指导来说明代码需要重复的地方以及可以定义一次并重用的地方。

Answer 1

只需提升自定义工具提示的编码，然后它将在标记之间重复使用。我不认为 VL 具有 Vega 中使用的“交互”属性。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/population.json"},
  "transform": [
    {"filter": "datum.year == 2000"},
    {"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
  ],
  "height": {"step": 17},
  "encoding": {
    "tooltip": [{"field": "gender", "type": "nominal", "title": "Gender"}],
    "y": {"field": "age"}
  },
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "population",
          "stack": "normalize"
        },
        "color": {"field": "gender", "scale": {"range": ["#675193", "#ca8861"]}}
      }
    },
    {
      "mark": {
        "type": "text",
        "opacity": 0.9,
        "color": "white",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "aggregate": "sum",
          "field": "people",
          "title": "population",
          "stack": "normalize",
          "bandPosition": 0.5
        },
        "text": {"aggregate": "sum", "field": "people", "title": "population"},
        "detail": {"field": "gender"}
      }
    }
  ]
}