Выделите / выделите жирным шрифтом на оси Vega.

Question

Можно ли выделить определенные метки на оси?

Моя текущая кодировка:

"encoding": {
       "x": { "field": "date", "type": "temporal", "axis": { "title": "Date", "grid": false } },
       "y": { "field": "value", "type": "quantitative", "axis": { "format": "d" } 
 }

И я бы хотел дни месяца (в отличие от времени) быть выделены / выделены жирным шрифтом, чтобы они легко выделялись. Также хотелось бы, чтобы все эти метки дня включали месяц, а не день недели, поэтому вместо 'Mon 07' я хочу получить 'Oct 07', как и для 'Oct 06'. Возможно ли это?

Answer 1

Вы не можете изменить стиль шрифта, обусловленный значением метки, но вы можете использовать axis.labelExpr , чтобы изменить значение метки в зависимости от условия.

Линейная диаграмма с условными свойствами оси * Пример 1006 * в документации Vega-Lite показывает один из возможных подходов, который имеет отношение к вашему вопросу.

Вот пример того, что вы могли бы сделать специально для многодневных почасовых данных, таких как Ваш ( редактор ):

{
  "mark": "line",
  "encoding": {
    "x": {
      "type": "temporal",
      "field": "x",
      "axis": {
        "tickCount": 12,
        "labelAlign": "left",
        "labelOffset": 2,
        "labelExpr": "[timeFormat(datum.value, '%H:%M'), timeFormat(datum.value, '%H') == '00' ? timeFormat(datum.value, '%b %d') : '']"
      }
    },
    "y": {"type": "quantitative", "field": "y"}
  },
  "width": 800,
  "data": {
    "values": [
      {"x": "2020-01-01T00:00:00", "y": -0.29},
      {"x": "2020-01-01T02:00:00", "y": -0.59},
      {"x": "2020-01-01T04:00:00", "y": 0.12},
      {"x": "2020-01-01T06:00:00", "y": -0.24},
      {"x": "2020-01-01T08:00:00", "y": -0.34},
      {"x": "2020-01-01T10:00:00", "y": -0.55},
      {"x": "2020-01-01T12:00:00", "y": -0.02},
      {"x": "2020-01-01T14:00:00", "y": 0.66},
      {"x": "2020-01-01T16:00:00", "y": 1.51},
      {"x": "2020-01-01T18:00:00", "y": 0.98},
      {"x": "2020-01-01T20:00:00", "y": 0.06},
      {"x": "2020-01-01T22:00:00", "y": 0.31},
      {"x": "2020-01-02T00:00:00", "y": 0.42},
      {"x": "2020-01-02T02:00:00", "y": 0.56},
      {"x": "2020-01-02T04:00:00", "y": 1.05},
      {"x": "2020-01-02T06:00:00", "y": 1.1},
      {"x": "2020-01-02T08:00:00", "y": 1.93},
      {"x": "2020-01-02T10:00:00", "y": 2.12},
      {"x": "2020-01-02T12:00:00", "y": 1.41},
      {"x": "2020-01-02T14:00:00", "y": 2.22},
      {"x": "2020-01-02T16:00:00", "y": 2.99},
      {"x": "2020-01-02T18:00:00", "y": 3.51},
      {"x": "2020-01-02T20:00:00", "y": 4.02},
      {"x": "2020-01-02T22:00:00", "y": 1.92},
      {"x": "2020-01-03T00:00:00", "y": 2.05},
      {"x": "2020-01-03T02:00:00", "y": 2.19},
      {"x": "2020-01-03T04:00:00", "y": 2.28},
      {"x": "2020-01-03T06:00:00", "y": 3.15},
      {"x": "2020-01-03T08:00:00", "y": 2.8},
      {"x": "2020-01-03T10:00:00", "y": 2.66},
      {"x": "2020-01-03T12:00:00", "y": 3.16},
      {"x": "2020-01-03T14:00:00", "y": 3.28},
      {"x": "2020-01-03T16:00:00", "y": 3.06},
      {"x": "2020-01-03T18:00:00", "y": 2.63},
      {"x": "2020-01-03T20:00:00", "y": 1.53},
      {"x": "2020-01-03T22:00:00", "y": 1.16},
      {"x": "2020-01-04T00:00:00", "y": 1.45},
      {"x": "2020-01-04T02:00:00", "y": -0.51},
      {"x": "2020-01-04T04:00:00", "y": -1.04},
      {"x": "2020-01-04T06:00:00", "y": -1.95},
      {"x": "2020-01-04T08:00:00", "y": -2.57},
      {"x": "2020-01-04T10:00:00", "y": -2.65},
      {"x": "2020-01-04T12:00:00", "y": -3.39},
      {"x": "2020-01-04T14:00:00", "y": -3.296},
      {"x": "2020-01-04T16:00:00", "y": -2.45},
      {"x": "2020-01-04T18:00:00", "y": -2.44},
      {"x": "2020-01-04T20:00:00", "y": -2.14},
      {"x": "2020-01-04T22:00:00", "y": -0.82},
      {"x": "2020-01-05T00:00:00", "y": 0.3},
      {"x": "2020-01-05T02:00:00", "y": 1.04}
    ]
  }
}