Добавьте значения Y в виде меток на линейном графике для некоторых точек данных

Question

У меня есть линейный график, довольно простой (см. Ниже для упрощенного примера, который работает на Vega Editor). В основном, это рисует линии, ось X - последовательные даты, ось Y - некоторые числовые значения.

Я пытаюсь добавить метки для некоторых точек данных на линии со значением Y в этой точке. Только для некоторых точек данных, потому что некоторые диаграммы могут быть более года, поэтому могут быть сотни дней (значения X).

Это, кстати, как Vega автоматически наносит метки на ось X. Если значений X слишком много, он не отображается каждый день, например, "1 января", "8 января", "15 января" и т. Д. (Приятно!)

Для справки: с C3 (библиотека диаграмм для D3) я использовал следующее, чтобы нарисовать одну метку из каждых 7 точек данных:

data: {
  json: data.data,
  type: 'spline',
  labels: {
    format: function(v, id, i, j) {
      if ( i % 7 === 3 ) {
        return d3.format('.2f')(v);
      }
    }
    ...

К сожалению, я понятия не имею, с чего начать. Я не нашел такого примера и не нашел ничего связанного с документацией.

Просто для справки, вот пример диаграммы, к которой я хотел бы добавить эти метки:

{
    "$schema": "https://vega.github.io/schema/vega/v3.json",
    "width": 500,
    "height": 250,
    "autosize": {
        "type":   "fit",
        "resize": true
    },
    "data": [{
        "name": "table",
        "format": {
            "parse": {
                "date":  "date",
                "value": "number"
            }
        },
        "values": [
            { "date": "2017-09-01", "value": "12.34", "what": "one" },
            { "date": "2017-09-01", "value": "4.34",  "what": "two" },
            { "date": "2017-09-02", "value": "13.34", "what": "one" },
            { "date": "2017-09-02", "value": "13.34", "what": "two" },
            { "date": "2017-09-03", "value": "4.34",  "what": "one" },
            { "date": "2017-09-03", "value": "15.34", "what": "two" },
            { "date": "2017-09-04", "value": "15.34", "what": "one" },
            { "date": "2017-09-04", "value": "5.34",  "what": "two" },
            { "date": "2017-09-05", "value": "16.34", "what": "one" },
            { "date": "2017-09-05", "value": "6.34",  "what": "two" },
            { "date": "2017-09-06", "value": "17.34", "what": "one" },
            { "date": "2017-09-06", "value": "17.34", "what": "two" },
            { "date": "2017-09-07", "value": "18.34", "what": "one" },
            { "date": "2017-09-07", "value": "8.34",  "what": "two" },
            { "date": "2017-09-08", "value": "18.34", "what": "one" },
            { "date": "2017-09-08", "value": "14.34", "what": "two" },
            { "date": "2017-09-09", "value": "9.34",  "what": "one" },
            { "date": "2017-09-09", "value": "14.34", "what": "two" },
            { "date": "2017-09-10", "value": "20.34", "what": "one" },
            { "date": "2017-09-10", "value": "4.34",  "what": "two" }
        ]
    }],
    "scales": [{
        "name": "x",
        "type": "utc",
        "range": "width",
        "domain": {"data": "table", "field": "date"}
    }, {
        "name": "y",
        "type": "linear",
        "range": "height",
        "nice": true,
        "zero": true,
        "domain": {"data": "table", "field": "value"}
    }, {
        "name": "color",
        "type": "ordinal",
        "range": "category",
        "domain": {"data": "table", "field": "what"}
    }],
    "axes": [{
        "orient": "bottom",
        "scale": "x",
        "encode": {
            "labels": {
                "interactive": true,
                "update": {
                    "fill":     {"value": "steelblue"},
                    "angle":    {"value": 50},
                    "fontSize": {"value": 14},
                    "align":    {"value": "left"},
                    "baseline": {"value": "middle"},
                    "dx":       {"value": 3}
                },
                "hover": {
                    "fill": {"value": "firebrick"}
                }}}
    }, {
        "orient": "left",
        "scale": "y"
    }],
    "marks": [{
        "type": "group",
        "from": {
            "facet": {
                "name": "series",
                "data": "table",
                "groupby": "what"
            }
        },
        "marks": [{
            "type": "line",
            "from": {"data": "series"},
            "encode": {
                "enter": {
                    "x": {"scale": "x", "field": "date"},
                    "y": {"scale": "y", "field": "value"},
                    "stroke": {"scale": "color", "field": "what"},
                    "strokeWidth": {"value": 2}
                },
                "update": {
                    "interpolate": {"value": "monotone"},
                    "fillOpacity": {"value": 1}
                },
                "hover": {
                    "fillOpacity": {"value": 0.5}
                }
            }
        }]
    }]
}

Answer 1

В Vega есть свойство tickCount, которое можно добавить к определениям осей. Добавление этого к вашей оси Y должно решить ваш случай:

{
    "orient": "left",
    "scale": "y",
    "tickCount": 4
}

Вы также можете использовать сигнал, если он должен быть динамическим.

Эта функция даже более мощная, чем показано на рисунке. Проверьте документы для других вариантов в ссылке ниже: https://vega.github.io/vega/docs/axes/