如何为Vega折线图的部分数据点添加Y值标签？

Hey there! I get exactly what you're asking for—when you have a year's worth of daily data, labeling every single Y-value would turn your chart into a cluttered mess, just like if Vega tried to show every date on the X-axis. Instead, we want to pick a subset of points to label, following the same smart logic Vega uses for X-axis ticks. Let's break down how to do this in Vega:

First, Let's Start with Your Base Line Chart #

Here's the simplified example you referenced, set up with date parsing and basic scales:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 300,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"date": "2023-01-01", "value": 28},
        {"date": "2023-01-02", "value": 55},
        {"date": "2023-01-03", "value": 43},
        // Add hundreds more daily data points here for a full year
        {"date": "2023-12-31", "value": 30}
      ],
      "transform": [
        {"type": "formula", "expr": "toDate(datum.date)", "as": "parsed_date"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "time",
      "domain": {"data": "table", "field": "parsed_date"},
      "range": "width",
      "nice": {"interval": "month", "step": 1}
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "value"},
      "range": "height",
      "nice": true,
      "zero": true
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale", "title": "Date"},
    {"orient": "left", "scale": "yscale", "title": "Value"}
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "parsed_date"},
          "y": {"scale": "yscale", "field": "value"},
          "stroke": {"value": "#4682b4"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}

Method 1: Label Points Aligned with X-Axis Ticks #

This is the most intuitive approach—we'll only label data points that line up exactly with the auto-generated X-axis ticks, just like how Vega picks which dates to display.

Step 1: Add a Filtered Dataset for Labels #

Add a new data source that filters your original data to only include points matching X-axis ticks:

"data": [
  // Keep your original "table" data source here
  {
    "name": "label_points",
    "source": "table",
    "transform": [
      // Fetch the auto-generated X-axis tick values
      {"type": "formula", "expr": "scale('xscale').ticks()", "as": "x_ticks"},
      // Filter to only keep points whose date exists in the tick list
      {"type": "filter", "expr": "indexof(datum.x_ticks, datum.parsed_date) !== -1"}
    ]
  }
]

Step 2: Add a Text Mark for Labels #

Add a new text mark to render the Y-value labels for the filtered points:

"marks": [
  // Keep your original line mark here
  {
    "type": "text",
    "from": {"data": "label_points"},
    "encode": {
      "enter": {
        "x": {"scale": "xscale", "field": "parsed_date"},
        "y": {"scale": "yscale", "field": "value"},
        "text": {"field": "value"},
        "align": {"value": "center"},
        "baseline": {"value": "top"}, // Adjust to "bottom" to place labels above points
        "fill": {"value": "#333"},
        "fontSize": {"value": 10}
      }
    }
  }
]

Method 2: Custom Interval Labeling (e.g., Monthly/Weekly) #

If you want more control over which points get labeled (like only the first day of each month, or every 7 days), use time unit transforms to filter your data:

Update the label_points transform to target specific intervals:

{
  "name": "label_points",
  "source": "table",
  "transform": [
    // Extract month and day from the parsed date
    {"type": "timeunit", "units": ["month", "date"], "field": "parsed_date", "as": ["month", "day"]},
    // Filter to only keep the first day of each month
    {"type": "filter", "expr": "datum.day === 1"}
    
    // For weekly labels instead, use this:
    // {"type": "timeunit", "units": ["week"], "field": "parsed_date", "as": "week"},
    // {"type": "filter", "expr": "datum.week % 1 === 0"}
  ]
}

Bonus: Fix Overlapping Labels #

If you still run into label overlap (especially with dense data), add Vega's labelOverlap transform to automatically hide overlapping labels:

{
  "name": "label_points",
  "source": "table",
  "transform": [
    // Keep your existing filter logic here
    {"type": "formula", "expr": "scale('xscale').ticks()", "as": "x_ticks"},
    {"type": "filter", "expr": "indexof(datum.x_ticks, datum.parsed_date) !== -1"},
    // Auto-remove overlapping labels
    {"type": "labelOverlap", "method": "greedy", "size": [{"signal": "width"}, {"signal": "height"}]}
  ]
}

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