使用Vega的哪种标记可在刻度上展示数据点？

这种分段刻度+分数标记的可视化，用Vega可以通过组合多种标记类型快速实现，核心思路是：用rect绘制分段背景、rule绘制刻度线、symbol标记当前分数点、text添加分段标签，配合tooltip显示具体分数。

示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 100,
  "padding": {"top": 20, "bottom": 20, "left": 50, "right": 50},
  
  "data": [
    {
      "name": "segments",
      "values": [
        {"segment": "最小值", "value": 0, "color": "#e0e0e0"},
        {"segment": "低", "value": 26.3, "color": "#c6e48b"},
        {"segment": "中", "value": 42.9, "color": "#7bc96f"},
        {"segment": "高", "value": 54.8, "color": "#239a3b"},
        {"segment": "最大值", "value": 70.7, "color": "#196127"}
      ],
      "transform": [
        {"type": "window", "ops": ["lead"], "fields": ["value"], "as": ["next_value"]}
      ]
    },
    {
      "name": "score",
      "values": [{"value": 56}]
    }
  ],
  
  "scales": [
    {
      "name": "xScale",
      "type": "linear",
      "domain": [0, 70.7],
      "range": "width",
      "nice": false
    }
  ],
  
  "marks": [
    // 绘制分段背景
    {
      "type": "rect",
      "from": {"data": "segments"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "value"},
          "x2": {"scale": "xScale", "field": "next_value"},
          "y": {"value": 30},
          "y2": {"value": 70},
          "fill": {"field": "color"}
        }
      }
    },
    // 绘制刻度线
    {
      "type": "rule",
      "from": {"data": "segments"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "value"},
          "y": {"value": 20},
          "y2": {"value": 80},
          "stroke": {"value": "#333"},
          "strokeWidth": {"value": 1}
        }
      }
    },
    // 添加分段标签
    {
      "type": "text",
      "from": {"data": "segments"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "value"},
          "y": {"value": 95},
          "text": {"field": "segment"},
          "fontSize": {"value": 12},
          "align": {"value": "center"}
        }
      }
    },
    // 绘制当前分数标记点
    {
      "type": "symbol",
      "from": {"data": "score"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "value"},
          "y": {"value": 50},
          "size": {"value": 200},
          "fill": {"value": "#ff4d4f"},
          "stroke": {"value": "#fff"},
          "strokeWidth": {"value": 2}
        },
        "update": {
          "tooltip": {"signal": "{'分数': datum.value}"}
        }
      }
    }
  ]
}

关键部分说明 #

• 分段背景：通过window转换获取每个分段的结束值（下一个分段的起始值），用rect绘制横向色块区分不同区间。
• 刻度与标签：用rule绘制垂直刻度线，text在刻度下方添加分段名称，确保对齐。
• 分数标记：用symbol绘制高亮的圆点标记当前分数，通过tooltip配置显示具体数值。
• 自定义调整：可以修改color字段更换分段配色，调整width/height更改画布尺寸，修改domain适配你的数值范围。

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